絮叨絮叨 | 关于html5中各端适配

讲起html5，一般而言developer都会知道bootstrap，bootstrap是世界第一大响应式框架，然鹅...剧情需要，UI并不会围绕bootstrap来设计，为了需求，你需要自己来完成各端适配。

先说bootstrap，它根据媒体查询来根据查询到的媒体宽定义显示宽，拿到宽整除12来得到每节的大小，讲真，分12份艺术层面讲我不太懂，一般是够用的，让你设计页面的时候可以以1，3为整除，让你用起来会走上艺术路线，而且你会发现你设计的页面会根据屏幕大小而自然适应，当然，你可能从此失去设计要求。

在移动端页面CSS像素级问题上，可能你会感受到，宽10px高10px的黑色背景小块 或者 14px的字，在不同端显示的大小差别很大。

这个是因为

css-px与设备px

理论上，我不太想讲这些术语上的东西，什么dpi，什么viewport。。但是你都要了解，至少多看几个帖子。。

物理级的东西讲太多容易乱，我就不墨迹了！

推介：

《此像素非彼像素》：http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html

《淘宝弹性布局方案lib-flexsize实践》：http://mp.weixin.qq.com/s/CJntnUqYoCaqnq5Wp4MakQ

---

HTML5中我们要做到让UI图按照比例自成，让你分配页面像素，那么我们如何拿到这个比例？又要根据什么作为屏幕划分？这个问题问的好，HTML5中有这么一个东东他叫rem，em。

说通俗点：怎么在各个屏幕拿到一个可以值，那么rem、em就是那个你想要的。

rem：根节点字体大小

em：父元素字体大小

first，long long ago ... 我都是这么搞事情的，

拿到屏幕宽度

根据上文，我们可以设置根元素字体  即rem的大小

赋值给根元素一个字体大小

这时候你可以试着打印html的font-size：document.getElemntsByTagName('html').style.fontSize

如果你的页面设置为iphone6的情况下，你会得到这样的一个值

84.1667px

当前你拿到的window.innerWidth的值是375

总宽除以这个fontSize刚好12倍

那么这样，你就得到现在你的rem=84.1667px，当你在拿到设计图的时候，你就知道1rem是多少，正比你要的尺寸，就可以得到应该赋值多少

比如：设计给100px，100/84.1667 = ？ 那你就得到这个值 （100/84.1667）rem可以得到100px在移动端显示的值。

注意：

1>这种方法适用于任何移动端适配，但是算起来会比较费劲。

2>如果你用sass的情况下需要设计一个函数来帮你计算rem，但是这种方法还是会很难受，理解起来很不方便。

3>当然这种方法你需要给你的meta标签加入viewport属性。记得要有deviceWidth

---

than，经过不屑的专研，找到一种更为合适的方法，就是淘宝现框架里面的flex-size

下面来激情要来了！！！！

flex-size根据不同手机计算dpr值，并赋值一个固定的值给根元素，同样是rem

m.taobao.com

可以看到iphone6的情况下，fontSize为75px。

经过本人多次实验，现在我们拿到的75px只是一个基数，怎么这样说？

其实很简单，你加入flex-size这个js文件之后呢，你会得到一个比例值，这个比例的根值为75px。

一般设计给你的设计图都是苹果6的样式，如要还原你可以想到，如果要配合各种设备，各种设备在浏览器端的fontsize是会变得，那么你的设计图应该怎么在这种轮询下跟着变换？

很简单，你需要给你设计标注的所有px值直接除以75px，再赋值单位rem，你就得到你应该拿到的值

flex-size你可以直接得到一个全局的rem属性，在你的script中设置css的时候也可以直接拿到来使用，非常方便

简单点，我都是这么写的。

sass配置

在@include commen-area(to-rem(179),to-rem(64))里，179代表设计图宽度，67代表设计图高度

就酱紫，是不是很简单！！！

当然你如果不想用sass，那你可以自己直接计算，整体很简单。

加入flex无需定义拿到当前rem

使用flex-size以后你只要在你的页面里面加入这个东东就好了，剩下的一概不用。什么viewport都不需要，自然都给你加好了。。。

head设置

好了，大概就这么些。。没啥太多的。希望对你有用~~~~