rem--响应式布局踩坑日记

2016-11-25 本文已影响0人 sanchuan

内容不全是关于rem,还有其他摘录

如发现本文错误，欢迎交流指正！

因工作需要，研究了下响应布局，刚开始因为用@media比较多，但自己正在学习的路上，刚好一直以来对rem都没怎么做过实践，所以拿小项目来练手。

只不过事与愿违，原来我以为的rem，并不是真正的rem.

其实关于rem，网上也有很多资料，但一般都是会看到这个web app变革之rem.

这篇文章说得很简明扼要，只因为个人见解太窄，所以并没有马上明白，rem到底怎么运用在项目里。因为我拿到的设计稿是1080*1920然后我写的是

html{
        font-size:10px;
        font-size:62.5%
        ...
}

当时心里认为这就是对的，所以一路开心的rem,rem...一直到项目结束。
再打开结构来调节响应式，结局：悲剧了！

具体关于rem怎么工作的，我不具体讲，大家自己去网上查资料。然后我一路查资料，刚开始查到的是这个版本：

(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = (html根元素) * (clientWidth / 320) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

我想各位大神其实都估计忽略了小白们对整个布局的认识不够的因素。
在正常的浏览器下,以chrome为例，规定了font-size最小为12px，所以上文中，如果我在1080的设计稿下，采用10px根元素，然后做适配的话，是根本不可能的。不相信的童鞋可以自己在浏览器里面试试：

解决方法，我是按照这篇文章：解决chrome12号字体

在面对大设计稿的时候，我们最好可以同UI商量一下，能否做成640或者其余大小的PSD，不行的话，在考虑根元素大小的时候，应该尽量考虑到页面需求，定好根元素大小，以适配各屏幕上缩放字体在可视范围之内。
其实面对这个问题，我又在万能的网上找了这个：

看上去就很心动的：手机端页面自适应解决方案—rem布局（进阶版，附源码示例）
这里说到了阿里的高清方案，原理原文中也有，大家自己去看吧。

通过了以上几个小方案，我的页面终于响应起来。只是如果在比较老的机器或者页面比较大和复杂的情况下：

用js控制根元素的大小来适配有个不好的地方，页面类容大的时候，加载时页面会有明显的动态变化，用响应式样式控制最好。

在动态获取的代码里有：

clientWidth这个属性：这是获取当前（**元素）可见区域

具体见：scrollHeight,offsetHeight,clientHeight的本质区别

总结一下：这次开发过程吧！
这次是因为考虑到需求，应用在移动端。所以采用了rem,在开发过程里，如果你是负责切图的h5的话，你真的需要和你的UI多多交流联系。本来同一个效果，如果你不反复跟UI和产品讨论细节以及交互方式，最后烦死的肯定是你自己。我当然希望大家都开开心心就好，只是有些事大家能免还是免了吧。

在整个工程项目里，最开始项目的时候，而你自己经验不是很好的情况下：我劝你还是多思考以下一些问题

HTML结构，我刚开始写页面的时候也很不注意结构以及语义化，我想大家只要做过这一块的人，应该多多少少会了解到这些东西。一个好的H5就在于他的结构上写的特别清晰明了，没有过多的嵌套及写许多冗杂的Class。当然这些是需要时间来积累经验的，大家可以再以后的工作中多看大神们的代码是怎么写的，以此来借鉴提升自我。
规范的CSS命名方式。规范的Css命名方式可以在你工作的时间里不必要时时刻刻翻到你的html里去找你的命名，也方便代码在以后维护的时候，胡乱找，可能还影响其余命名。网上有很多种命名方式，当然你也可以有你自己的方式。这是我找的一些资料：Get BEM
清洁的代码习惯，虽然现在也有很多的工具，还有许多项目上线之后代码就压缩的原因。但是清洁的代码至少能给你的老大看了有一种良好的感受。
最重要的：考虑需求。不要自己胡乱猜测，也不要自以为是，多和同事交流，才能把任务的差异做到最小。

【To be Continue!】

rem--响应式布局踩坑日记

猜你喜欢

热点阅读