与我们合作
我们专注：网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务：网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案
有一个品牌项目想和我们谈谈吗?
您可以填写右边的表格，让我们了解您的项目需求，这是一个良好的开始，我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话，让我们听到您的声音
您也可通过下列途径与我们取得联系：
地 址: 深圳.龙岗区大运软件小镇11栋3楼
电 话: 138 2888 4598 / 138 0880 9053
网 址: http://www.appvx.cn
快速提交您的需求 ↓
用rem实现自适应布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂rem是如何实现自适应布局，如何根据设计稿来调整rem的值？rem一定要加载js吗？rem的根html font-size设置为多少合适？看看这篇文章，也许能帮到你。
rem自适应原理
rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。
rem的值
目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。
使用js
;(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
};
if (width > maxWidth) {
width = maxWidth;
}
//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
var rem = width * 100 / designWidth;
//兼容UC开始
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id='rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
//兼容UC结束
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(640, 640);
你可以把上面的代码内嵌到html的head中，换算比例是1rem=100px，为了计算方便，你可以在我的一个github项目下载完整的结构和一个压缩的js。
上面代码中的关键代码是：
var width = docEl.getBoundingClientRect().width;
var rem = width * 100 / designWidth;
docEl.style.fontSize = rem + "px";
第一行代码，获取移动设备的宽度，第二行，rem的值等于(设备的宽度)x100/(设计稿宽度)，第三行，设置html的字号为第二行的值。
有些人可能会注意到第二行代码跟淘宝的那个有所区别，区别就在于rem的换算比例，这里你可以任意改动为实际中的情况，比如有人喜欢用20px，那你可以将上面的100改为20，换算比例则改为1rem=20px。
还有的人要用回淘宝的那个，那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了，假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。
使用媒体查询
说到底，上面的js代码不就是根据不同的设备调整对应的html字号嘛，那么我们根据实际的设备，来加上相应的字号不就行了吗？
我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}
@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}
@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}
body {
max-width: 640px
}
}
本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...
- GO 欣赏案例
- 查看经典案例
