CSS3---移动端自适应rem

普及知识点

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

CSS单位

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

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会继承父级元素的字体大小
3、默认计算方式
浏览器的默认字体大小都是16px，所以1em=16px，那么10px=0.625em

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

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

CSS2及CSS3单位集合之%

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

CSS2及CSS3单位集合之ex和ch

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宽高转换

①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;}

rem字体转换

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

rem面试题

meta元标签

到目前为止，PC端正常展示，接下来用移动端IPhone6机型测试下，显示效果如下所示：

接下来找个企业官网做下对比分析
普阳铁厂http://hbpygt.cardofcom.net/com.htm
奥星官网http://www.austar.com.cn
对比后发现同一个网站，在移动端无法正常展示

开发移动端设置viewport配合进行缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

参数分析：
device-width设备宽度、initial-scale初始缩放比、maximum-scale允许用户缩放到的最大比例、user-scalable用户是否可以手动缩放 (no/yes)
关于meta元标签其他介绍**，详见下节：**

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

rem计算转换

到目前为止，已经可以实现移动端和PC端的rem布局，但还会发现一个问题…
同一个元素，在不同机型上高度一样（正常业务逻辑：屏幕越小，元素应该是等比例缩小，从而统一展示效果）

所以接下来要解决一个问题：
怎么样在不同分辨率的情况下计算根元素需要的font-size的值，实现比例缩放，统一展示效果？

方案：
关于这个点，其实有两种解决方案，一种是基于CSS的情况，另外一种就要通过js计算获得

@media实现rem转换

怎么利用css做到基于不同的分辨率来定义呢？
首先想到的就是媒体查询。当基于媒体查询来做屏幕自适应时，首先要考虑下做哪些屏幕，做一下简单的列举，常见的屏幕分辨率的媒体查询：

除了以上列举几个，还有其他机型需要进行适配，所以由此可以看出利用CSS实现基于不同的分辨率来定义不同根元素字体大小，从而实现不同的rem大小有些麻烦。所以这种方法有一个弊端，需要计算每一个屏的基础值
所以开发中大多使用JS代码计算来根据屏幕宽度实现rem大小比例转换。

js实现rem转换

JS动态设置根元素字体大小
（1）获取根元素字体大小
document.documentElement.style.fontSize
（2）获取屏幕可视区域窗口宽度
document.documentElement.clientWidth
计算语法：
document.documentElement.style.fontSize
=
document.documentElement.clientWidth / 750*100 + ‘px’;

通过以上计算公式便可以实现在750px大小的设备中，1rem=50px

根元素字体大小font-size=(375/750)*100+‘px’=50px

接下来改动机型再次测试，例如改为小一号的iPhone5，此时会发现宽高变为42.66，实现了根元素字体大小font-size跟随机型缩放效果。

接下来做下处理，一般在页面加载时自动执行js代码进行根元素字体大小计算 ，对js代码进一步修改如下

针对以上各种问题及情况，勤劳的程序猿们写了一个开源的解决方案flexible。
简介及原理：
flexible.js是一个开源的用于终端设备的适配解决方案，主要用于解决各种不同尺寸移动设备的大小自适应问题，其原理是通过移动设备的dpr（设备像素比=物理像素/设备独立像素）和屏幕宽度来动态改变html的font-size大小。

rem自适应js文件flexible.js：
通俗理解：
就是通过动态获取屏幕宽度控制根元素字体大小,进而控制页面大小比例。flexible.js 的作用就是让你在不同的终端设备之间如鱼得水,就是一个终端设备适配的解决方案。也就是说它可以让你在不同的终端设备中实现页面适配。
用法：
在页面的中引入 flexible.js文件

rem布局小技巧：
①页面中模块间距离一般为0.2rem
②文章字体的大小一般分为四个档次 0.2rem 0.24rem 0.28rem 0.32rem，其他字体可以根据设计图自己测量，然后进行计算
③一般开发移动端都会在最外部写个div，限制页面效果图的宽度。
拿项目举例，例如移动端页面效果图的宽度都定在了640px。于是在项目中，最外层的div样式就设置成了，所有的内容都放到了container里。

flexible.js主要是改变了dpx和document的font-size大小。
大小为docEl.getBoundingClientRect().width / 10 + ‘px’

假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。

lexible.js
假如一个元素的宽是160px,在平时，我们可以采用百分比可以做到自适应，假如使用响应式的话，可能需要设置多个，比如在320px，输出80px，而在640px输出160px等。而采用以上rem的方法，则只需要输出2.5rem就能实现统一，如下表格：

移动端开发

（1）vw和vh布局–字体大小测量计算即可
（2）rem布局：引入flexible.js自适应文件