码迷,mamicode.com
首页 > 其他好文 > 详细

px-rem自适应转换(转)

时间:2017-08-30 15:36:15      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:过程   设置   页面   func   bdd   移动端   存在   false   none   

技术分享
当前团队开发过程,存在2种度量单位(px、rem)各有说辞
px:各个终端统一大小,简单明了,未尝不可!
rem:大屏幕显示大字体,小屏幕显示小字体,渐进增强视觉感。
业界各种写法都有,不逐一讨论。
团队呼声:使用rem,达到字体渐进增强视觉感。
得出一套简洁的rem计算自适应方法!大喜!

核心换算片段如下
---------------------------------------------
<script>
function Rem() {
var docEl = document.documentElement,
oSize = docEl.clientWidth / 6.4;

if (oSize > 100) {
oSize = 100; // 限制rem值 640 / 6.4 =100
}

docEl.style.fontSize = oSize + ‘px‘;
}
window.addEventListener(‘resize‘, Rem, false);
Rem();
</script>

---------------------------------------------------

A: oSize = docEl.clientWidth/7.5; //设计稿默认750px宽度,这样7.5,如果设计稿是640px宽度,这个7.5就修改6.4

B: if(oSize>85){
oSize = 85; // 限制rem值 640 / 7.5 ≈ 85
}
640是max-width:640px这样的屏幕宽度,7.5是设计搞是750px
如果设计稿是 640px.则 640/6.4这样去
一把移动端页面 在 body处 设置 max-width:640px

如上加入这段代码,下面写单位的时候,直接按照PSD里面的标准大小除以100即可。
如:标注28px.则写 0.28rem即可!
自适应,体验性!beautiful!在各个终端完全自适应大小!伸缩自如!

媒体查询?那么一大段?分批次去写?NO,NO,NO.还得去适配。
工具换算?NO,NO!还得安装插件。

有了此REM()代码片段,再也不用担心产品,UI说这里小,那里大,不信?你试试!
View Code

 

 

___________(转自:http://www.cnblogs.com/leshao/p/5674710.html)

px-rem自适应转换(转)

标签:过程   设置   页面   func   bdd   移动端   存在   false   none   

原文地址:http://www.cnblogs.com/cuizhenyu/p/7452884.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!