REM就是个相对单位，它是看着html标签的字体大小算出来的。用这个方法做网页设计，就能让网页更适合各种手机、平板看起来舒服了。跟绝对单位的px比起来，REM就灵活多了，会根据你的设备自动调整大小。
为什么选择rem布局
用rem布局挺好的，主要就是为了适应手机和平板电脑这类设备呗！现在大家都喜欢拿手机上网，如果还是用老式的px布局，那页面在不同屏幕上看起来就乱七八糟了，字也小得看不清。但rem布局就能自动调节布局，保证无论在哪种设备上都能看得舒服，用着顺手。
如何动态设置html标签的font-size
为了用Rem布局，头一件事就是借助JS给HTML标签调个font-size。这个大小得看你设备的屏幕宽窄来定，比如设计稿宽750px的话，那就把html的font-size设成它的十分之一，也就是37.5px。这样，在手机宽度只有375px时，html的字体大小还是不变！
设计稿元素转换为rem单位
搞定了html标签的字体大小以后，咱们就要开始处理设计稿里的元素尺寸了。比如，设计稿里有个元素宽100像素，那咱就在代码里设成(100/html字号)REM。这样不管啥宽度的设备，它都能自动调到合适的屏幕宽度比例！
字体单位的选择
在rem布局里面，咱们还是习惯用px做字体大小的计量。毕竟换个布局那么费劲儿，没必要那么精细。但是，为了让手机上看网页也舒服点儿，可以借助CSS3的媒体查询来调整字体大小。比如，当屏幕变窄了，就把字号调大点呗。
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth = window.innerWidth;
// doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
// 640宽度以上进行限制 需要css进行配合
var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
// 初始化
setFontSize();
}(window, document));
媒体查询在rem布局中的应用
mediaquery就是css3里的大杀器！它可以针对各种设备，看，像屏幕大小啦分辨率啥的，用不一样的样式规则。在rem布局里，这个功能就更牛了，能让你在小屏设备上调整元素排版，还能优化字体显示，让网页在各种设备上看起来都美美的。
rem布局的实际应用案例
要真正明白REM布局怎么使用，看看具体例子就行。现在大家看到的那些热门的响应式网站用的就是REM布局，无论在哪种屏幕上都好看得很。研究研究他们，就能学会怎样根据自己的需求调整REM布局，让你的网页也变得美美的。
(function(WIN) {
var setFontSize = WIN.setFontSize = function (_width) {
var docEl = document.documentElement;
// 获取当前窗口的宽度
var width = _width || docEl.clientWidth; // docEl.getBoundingClientRect().width;
// 大于 1080px 按 1080
if (width > 1080) {
width = 1080;
}
var rem = width / 10;
console.log(rem);
docEl.style.fontSize = rem + 'px';
// 误差、兼容性处理
var actualSize = win.getComputedStyle && parseFloat(win.getComputedStyle(docEl)["font-size"]);
if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
var remScaled = rem * rem / actualSize;
docEl.style.fontSize = remScaled + 'px';
}
}
var timer;
function dbcRefresh() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 100);
}
//窗口更新动态改变 font-size
WIN.addEventListener('resize', dbcRefresh, false);
//页面显示时计算一次
WIN.addEventListener('pageshow', function(e) {
if (e.persisted) {
dbcRefresh()
}
}, false);
setFontSize();
})(window)
//对H5活动推过页面，宽高比例有所要求，可适当调整
function adjustWarp(warpId = '#warp') {
const $win = $(window);
const height = $win.height();
let width = $win.width();
// 考虑导航栏情况
if (width / height < 360 / 600) {
return;
}
width = Math.ceil(height * 360 / 640);
$(warpId).css({
height,
width,
postion: 'relative',
top: 0,
left: 'auto',
margin: '0 auto'
});
// 重新计算 rem
window.setFontSize(width);
}
rem布局的优缺点分析
虽然rem布局挺好，灵活又能应变，但还是有些不足。比如说，要控制尺寸的东西用这个就不大行。而且，搞rem布局还挺费劲儿的，得懂点儿编程才行，对那些不懂技术的设计师来说可能有点难学。
如何优化rem布局
要让rem布局更好看，我们可以试着用更牛逼的JavaScript写法设定字体大小，或者借助CSS预处理器（像Sass或Less）简化样式表。另外，多试试，多看看，就能找出并解决rem布局中的问题，让网页布局更上一层楼，给用户带来更好的体验。
总结与展望
搞网页设计的话，rem布局真的挺实用，让咱们能方便地适应各种设备的屏幕大小，享受一样棒的上网感觉。随着手机用得越来越多，网页技术也在进步，rem布局以后肯定会更火。
@media screen and ( min-width: 320px){html{font-size:50px}}
@media screen and ( min-width: 360px){html{font-size:56.25px}}
@media screen and ( min-width: 375px){html{font-size:58.59375px}}
@media screen and ( min-width: 384px){html{font-size:60px}}
@media screen and ( min-width: 400px){html{font-size:62.5px}}
@media screen and ( min-width: 414px){html{font-size:64.6875px}}
@media screen and ( min-width: 424px){html{font-size:66.25px}}
@media screen and ( min-width: 480px){html{font-size:75px}}
@media screen and ( min-width: 540px){html{font-size:84.375px}}
@media screen and ( min-width: 640px){html{font-size:100px}}
读完今天这篇文章后，你是不是对rem布局有更深的理解？下次做网站时，要不要试一试用rem布局？快来评论区晒出你的看法。别忘了给我点个赞，分享出去，让大家都知道rem布局的超酷之处！
评论0