移动端适配的小知识点！

基本概念

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

那什么是em和rem呢？

0一、 em

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

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

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

设置字体大小的状况下：

注意看一下咱们设置的 font-size!设置字体大小号咱们的 em单位立刻就是以它为相对的对象了！

0二、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

实现移动端适配方案：

一、先用内联的方式引入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中，直接本地引入就行了，很是方便！