CSS 笔记（十四）：常用单位 & 适配方案（移动端）

CSS 笔记（十四）：常用单位 & 适配方案（移动端）

常用单位

像素

默认情况下，视口的水平和垂直方向由很多小方格组成，有多少个小方格就有多少个像素，特点在于不论视口的大小如何改变，像素的大小总是固定的

百分比

百分比是一个相对单位，总是以当前元素的父元素作为参考，特点如下：

• 子元素宽度参考父元素宽度
• 子元素高度参考父元素高度
• 子元素的内边距和外边距均参考父元素的宽度
• 边框属性不能以百分比为单位

em

em 是一个相对单位，总是以当前元素的字体大小为参考，如果此元素未设置字体大小，那么参考祖先元素的字体大小，若所有祖先元素都没有设置字体大小，那么参考浏览器默认的字体大小，示例如下：

fontSize = 12px

10em = 10 * fontSize = 120px

rem

rem 是一个相对单位，总是以根元素（html）的字体大小为参考，如果根元素未设置字体大小，那么参考浏览器默认的字体大小（16px），示例如下：

rootFontSize = 15px

> 10rem = 10 * rootFontSize = 150px

不论当前元素的祖先元素是否设置了字体大小，rem 所参考的也是根元素的字体大小

vw/vh

vw/vh 是一个相对单位，总是以视口的大小为参考，示例如下：

ViewportWidth = 700

> 10vw = 0.1 * ViewportWidth = 70

ViewportHeight = 1000

> 50vh = 0.5 * ViewportHeight = 500

vmin/vmax

vmin/vmax 是 vw/vh 的衍生单位

• vmin = min(vw, vh)
• vmax = max(vw, vh)

应用在移动端中旋转屏幕后保持元素大小不变

视口

视口即为显示内容的区域，在 PC 端，视口大小即为可视区域的大小，在移动端，视口大小是固定的 980px

由于过去绝大多数网页的版心都是 980px，所以乔布斯为了让网页可以在移动端完美展示，所以将手机端的视口定义为了 980px，谷歌模仿了 iOS 系统的解决方案，不过，通常情况下移动端的物理尺寸远小于视口大小，所以系统默认将视口尺寸等比例缩小以容纳所有内容，如此一来将导致页面的显示效果并不理想，此时可以使用 meta 标签替换默认的 980px，示例如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">