🌻CSS 布局-移动端

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

平面转换

transform
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平移

  • 取值
    • 像素单位数值
    • 百分比（参照盒子自身尺寸计算结果）
    • 正负均可
  • 技巧
    • translate() 只写一个值，表示沿着 X 轴移动
    • 单独设置 X 或 Y 轴移动距离：translateX() 或 translateY()

定位居中

  • 方法一：margin
  • 方法二：平移 → 百分比参照盒子自身尺寸计算结果

旋转

  • 取值：角度单位是 deg
  • 技巧
    • 取值正负均可
    • 取值为正，顺时针旋转
    • 取值为负，逆时针旋转

转换原点

默认情况下，转换原点是盒子中心点
  • 方位名词（left、top、right、bottom、center）
  • 像素单位数值
  • 百分比

缩放

  • 技巧
    • 通常，只为 scale() 设置一个值，表示 X 轴和 Y 轴等比例缩放
    • 取值大于 1 表示放大，取值小于 1 表示缩小

倾斜

取值：角度度数 deg

多重转换

多重转换技巧：先平移再旋转
  • 多重转换原理：以第一种转换方式坐标轴为准转换形态
    • 旋转会改变网页元素的坐标轴向
    • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

空间转换

transform
空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。

平移

  • 取值与平面转换相同
  • 默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果

视距

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：(添加给父级，取值范围 800-1200)
notion image

旋转

  • Z 轴：rotateZ()
  • X 轴：rotateX()
  • Y 轴：rotateY()

左手法则—别太离谱

作用：根据旋转方向确定取值正负
使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
notion image

rotate3d

  • rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
  • x，y，z 取值为0-1之间的数字

立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中
属性名：transform-style
  • flat：子级处于平面中
  • preserve-3d：子级处于 3D 空间

缩放

 

视口

作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸
  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

适配方案

  • 宽度适配：宽度自适应
    • 百分比布局
    • Flex 布局
  • 等比适配：宽高等比缩放
    • rem
    • vw

媒体查询

关键词 / 逻辑操作符

  • and
  • only
  • not

媒体类型

媒体类型用来区分设备类型
  • screen：屏幕设备
  • 打印预览：print
  • 阅读器：speech
  • 不区分类型：all

媒体特性

  • 视口宽高：width / height
  • 视口最大宽高：max-width ；max-height
  • 视口最小宽高：min-width；min-height
  • 屏幕方向：orientation
    • protrait：竖屏
    • landscape：横屏

媒体查询-外部CSS

rem

简介

  • rem单位，是相对单位
  • rem单位是相对于HTML标签的字号计算结果
  • 1rem = 1HTML字号大小

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

rem 布局

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。

flexible.js

flexible.js 是手淘开发出的一个用来适配移动端的 js 库。
核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。

rem 移动适配

  • 确定基准根字号
    • 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  • rem单位的尺寸
    • rem单位的尺寸 = px单位数值 / 基准根字号
    • VSC 插件计算

vm、vh

vw 和 vh 是相对单位，相对视口尺寸计算结果
  • vw：viewport width（1vw = 1/100视口宽度 ）
  • vh：viewport height ( 1vh = 1/100视口高度 )

vm 布局

vw 单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )

媒体查询

  • max-width：最大宽度（小于等于）
  • min-width：最小宽度（大于等于）
 
🌻
欢迎在下方留言讨论~
CSS 布局-定位CSS 高级
Loading...
目录