css3移动端

【前言】2019.9.12

内容：CSS单位，rem布局，CSS单位兼容，em，ex&ch，rem宽高转换…

CSS单位：绝对和相对
单位兼容及重点单位
rem布局两种计算实现方式：css的@media和js的flexible.js插件

浏览器的默认字体大小：16px
chrome字体最小限制：12px
CSS单位分为绝对单位和相对单位

CSS中，单位分为两类
（1）绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；
（2）相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。

CSS绝对单位

PS：绝对单位通常使用在打印方面

CSS相对单位

CSS单位浏览器兼容性

CSS重要单位集合：
①px像素Pixel，绝对长度单位，相对于显示器屏幕分辨率而言的。
②em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
③rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
④%一般宽泛的讲是相对于父元素
⑤vw与vh视窗单位，vmax与vmin可以判断屏幕横竖屏

CSS2及CSS3单位集合之em

1、简介：
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸16px。
2、特点：
① em的值并不是固定的
②em会继承父级元素的字体大小

默认计算方式
浏览器的默认字体大小都是16px，所以1em=16px，那么10px=0.625em

继承性
em是一个相对的单位，是当前元素相对于当前对象字体的大小而言的；
例如：父元素设置font-size: 32px ，子元素设置font-size: 1em ，那么子元素的字体大小也是32px。如果父元素没有设置字体大小的话，就是想对于浏览器默认的字体大小而言的

继承性
em是一个相对的单位，是当前元素或相对于父元素字体的大小而言的；
如果父元素没有设置字体大小，则相对于浏览器默认字体大小而言的

一般宽泛的讲是相对于父元素，但是并不是十分准确，分为以下几种情况。
①对于普通定位元素就是我们理解的父元素
②对于position: absolute;的元素是相对于已定位的父元素
③对于position: fixed;的元素是相对于ViewPort（可视窗口)

ex 和ch 单位，依赖于当前字体font-family 和字体大小 font-size。
ex 指当前字体环境中小写字母x 的高度；
ch 指当前字体环境中数字 0 的宽度。

什么是rem？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
看到rem会想起em单位，em（font size of the element）是指相对于当前对象内字体大小的单位。它们之间其实很相似，只不过一个宽高计算是依赖根元素字体大小，另一个是依赖当前对象或祖先的字体大小计算。

rem计算验证：
所谓依赖根元素来计算的方式，就是根据根元素html的font-size字体大小计算，然后所有的rem就根据这个font-size来计算

rem计算验证：
问题：
验证后发现chrome字体限制BUG，因为chrome限制最小字体为12px，所以此时无法将根元素字体大小的16px的62.5%缩为10px。
即chrome下最小字体为12px，所以假如你设置html{font-size:62.5%} header{height:8rem} 那么在其他浏览器下 header的高度是80px，但是在chrome下是96px。
方案：
设置：html{font-size:625%} 这样子既便于计算，又不会产生这个问题

rem计算验证：
此时再使用rem的话1rem=100px，如果想设置header元素高度为80px，则可以这样设置header{height:0.8rem;}

如果将html{font-size:625%;}后，宽高计算都没有问题，但字体会顶飞，变得特别大…

rem字体过大解决方案：
重新定义body字体大小为font-size:0.16rem即可

面试常问：
设了html{font-size:62.5%}后就有1rem = 10px，为什么不直接设置html{font-size:10px}，如果设置10px，则1px也是=10px？

答案：

究其原因区别在于没有做移动端适配
通常在写移动端页面的时候，我们都会设置viewport，保证页面缩放没有问题，最常见的viewport的meta标签如下：
开发移动端设置viewport配合进行缩放

移动端缩放适配：
开发移动端设置viewport配合进行缩放，加上name=viewport缩放设置后再次测试

分类：meta 标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）

（1）http-equiv 属性的 Content-Type 值（显示字符集的设定）
说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。语法如下：

该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等。

注意：
以上为HTML5的声明语法，传统声明语法为

标签的作用： （1）设置页面关键字 （2）设置网站页面说明，用于搜索引擎推广 （3）添加网站作者信息 标签的作用： name 属性为viewport 时，主要控制移动屏幕的缩放

viewport为可视区域。
对于桌面浏览器，我们都很清楚 viewport 是什么，就是除去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域
由于移动设备屏幕宽度不同于传统 web，因此我们需要改变 viewport 值。

标签的作用： name 属性为viewport 可视区域时取值

可以操作的属性有 4 个：
width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no，yes)

移动端开发时常用语法

解析：
强制让文档与设备的宽度保持 1:1 ；
文档最大的宽度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
user-scalable 定义用户是否可以手动缩放（ no 为不缩放），使页面固定设备上面的大小；