移动端适配的小知识点！

切图仔ice
1,838 阅读6分钟

基本概念

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

那什么是em和rem呢？

01、 em

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方式最好，当然还有其他的方式，看自己个人需求！

\color{red}{注意}

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

avatar
文章
阅读
粉丝