移动端适配的小知识点！

平时我们写页面的时候写的 css 单位一般都会是 px 为单位也就是像素单位，也就是一个相对长度的单位，而像素也就是相对于显示器屏幕的分辨率而定的。那么除了一个 px 单位以外还有 em 以及 rem ,在我们国内来说用得最多当然是 px 单位，而在国外的网站字体用的大都 em 和 rem 的单位，所以国外大部分的网站可以调整！

那什么是 em 和 rem 呢？

01、 em

呢也是相对长度单位，但是它是相对于当前的对象文本内的字体的大小而言的，要是你在使用 em 的时，当前对象的文本未设置字体的大小也就是 font-size 这个样式的时候那么 em 的大小将会以浏览器的字体默认大小（ 16px ）为相对单位，但是为了方便计算一般会在 body 中设置 font-size:62.5% ，具体用法请自行查看相关文章

没设置字体大小的情况下：

上面可以看出来， height:1em 在浏览器 1em 实际的像素就是 16px 而已，也就是我们上面说的没设置字体的大小的情况下 em 单位将会以默认（ 16px

）而相对。

设置字体大小的情况下：

注意看一下我们设置的 font-size !设置字体大小号我们的 em

单位马上就是以它为相对的对象了！

02、 rem

rem 是我们重点介绍的对象，那么又什么是 rem 呢， rem 是 css3 新增的一个单位，那么它和 em 又有什么样的区别呢，区别是 rem 则是只相对于 HTML 跟元素为相对单位，那么修改整体字体的大小只需要直接在 HTML 的跟元素上直接相关它相对的单位就可以完美的解决这个需求，同时也可以避免修改以后出现一系列未知的bug，而且现在对于 rem 来说兼容性也比较好，当然除了IE8以及更早的版本以为兼容不是很好，但是也可以直接多写一个绝对单位进行声明就OK，

看一下最基本的用法：

我们是设置 HTML 根元素的 font-size:37.5px 作为相对的单位，那么怎么计算呢，也就是 1rem

就等于 37.5个像素！

pc和移动端的适配

就目前来说许多主流的网站不仅仅是在pc端上完美展示，移动端也同样拥有非常完美的界面，几乎所有的网站都把移动端作为重中之重，不再只是只在pc端展示优美的界面，而是把移动端作为同等比重去适配移动端，移动端的适配有新的一套专门的UI设计稿，也可能只是简单的适配原来的pc端的界面，界面未发生大的变化只是适配了移动端的显示，网上适配移动端的方案百花绽放。

通过上面的预热知识，大体也懂得了 rem 这个单位的用法计算，如果看上面的介绍还没明白可以继续参考相关文章了解清楚。

那么我们直接上手 flexible.js 阿里的移动端适配解决方案！

附上:

官网文档地址： github.com/amfe/articl…

GitHub地址： github.com/amfe/lib-fl…

demo图：

实现这一简单的效果对于我们来说简直是so easy,这个demo能够实现对各个主流的移动端浏览器不管是微信内置浏览器还是它都完美适配展示我们想要的效果，但是归功于 flexible.js

实现移动端适配方案：

1、先用内联的方式引入cdn地址（优先加载flexible.js）

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
复制代码

未引入 flexible.js 的之前：

引入 flexible.js 之后：

引入以后我们会发现它自动的为我们添加了一个 font-size="37.5px;" 那么这个 37.5px 是怎么计算的呢? 假设我们的设计稿为： 750px 而 flexible.js 会将视觉稿分为 100份 ，而每一份为一个单位，假设为 m

个单位那么

1m = 7.5px
1rem = 10m 
1rem = 75px

复制代码

假如有一个尺寸为 300*300 像素换算成 rem 则是： 4rem * 4rem

设计稿为 750px 宽，那么整个屏幕也就是 十份 ,对应的 font-size: 75px ，而且我们的flexible.js都会根据屏幕帮我们自动计算好 font-size 的大小，就像我们刚刚截图的地方是 font-size:37.5px ,它是有 flexible.js 动态计算出来的！ flexible.js 的实质也就是：动态改变 meta 标签。

看看它的源码：

var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
    document.documentElement.firstElementChild.appendChild(metaEl);
} else {
    var wrap = doc.createElement('div');
    wrap.appendChild(metaEl);
    documen.write(wrap.innerHTML);
}

复制代码

在官网文档中也说明了我们不用手动设置 dpr 这个属性，因为 Flexible 在 Android 系列的手机始终都会默认为1，而 ios 则会进行动态判断！

Flexible 简直非常方便有木有：

完成引入 Flexible

以后基本我们整个移动端的适配已经完成了一半了，现在就可以一梭子的写样式了，简直完美啊！

文字处理

在 Flexible 中对于文字是不建议使用 rem 的!具体原因查看官方文档！那么我们不用 rem ,那么又用什么作为我们适配的单位呢，那当然是 px 啦，但是我们还是要作适配的，官网文档的方案是通过 [data-dpr] 属性来区分不同 dpr 下的文本字号大小。

div {
    width: 2rem; 
    height: 1rem;
    font-size: 12px; // 默认dpr为1的fontSize
}
//data-dpr为2的情况下：
[data-dpr="2"] div {
    font-size: 24px;
}

//data-dpr为3的情况下：
[data-dpr="3"] div {
    font-size: 36px;
}

复制代码

当然还有其他的更优的方法，这只是其中的一种而已也就是官网介绍的一种！

总结

我第一次进行移动端适配的时候是写2套样式的（个人不太建议），有的复杂地方还可能需要写新的移动端布局，因为移动端和pc是俩套设计稿，并不是直接对pc端进行适配，直接适配一套设计稿就不用写新的布局等，甚至更快更好，但是需求大于一切，当时使用的就是 meida queries （媒体查询）通过查询设备宽度来执行不同css的代码，缺点就是代码量比较大，维护不方便！所以还是直接使用 rem 方式最好，当然还有其他的方式，看自己个人需求！

因为我们引入的flexible.js的是http开头的，如果自己的项目是https的会出现加载不了的情况，会出现页面布局错乱的现象，此时此刻，别慌！我们可以将flexible.js的源码直接丢到我们新建的js中，直接本地引入就好了，非常方便！