我们要谈谈网页前端了。别忘记还有 CSS 那么棒的小伙伴呀。说到排版，千万不能掉以轻心。你家里应该有好几部手机和平板？对，这也解释了为什么响应式设计这么火。所以，CSS 的布局单位也得跟上时代了。以前我们习惯用像素（px）定元素位置和大小，但用久了你会发现，这家伙虽然小，但有时还是有点麻烦，么办？于是，rem 出现了！人们开始用它做网页布局，因为它比像素更给力，能随屏变化~
一、像素单位(px)的局限性
1.1固定大小
你知道像素单位吗？CSS用来调整尺寸的那个。它奇妙之处在于不管在哪看网页，页码都不变大变小，方便得很。不用担心屏幕大小了，好处多着。不过，如果利用不当也容易露出马脚，挺郁闷的。
1.2高分辨率设备问题
看你家，电视啥的高清设备越来越多了？就比如说那个Retina显示屏的，你要是做小图网站放在那屏上看，效果真差劲，根本看不清楚
1.3编辑复杂
看着屏幕上繁杂的分辨率选择，感觉头疼不已。搞定CSS以后还要应付各种各样的设备像素密度，分分钟可能会出错。所以开发人员可得动脑筋想想办法，搞个通用样式表，或用媒体查询来调整分辨率。这种方法确实能解决问题，可是太耗费金钱和精力了。
二、rem单位的介绍
2.1什么是rem
你听说过REM么？这个跟我们平时说的像素不太一样。在HTML里，文字大小改变的话，REM的值也会跟着变动。比如说字号缩成了16px，那么1REM就是16像素咯。所以调整字体大小时，REM的数值也会有所调整，这样就能确保网页上的元素看着刚刚好，超方便的有木有！
2.2 rem的优点
rem作为长度单位真的很给力！搞定了根元素字号后，其它部分也可以跟着用，光这一点就能让网页大小自适应调整，省事极了！无论手机、电脑大屏小屏，甚至多种分辨率的设备都能完美支持。
三、如何使用rem单位
3.1设置根元素的字体大小
用REM单位前，记得调一下字号，大部分人都爱用16px，我们就跟上潮流。先把根元素的字号调整好，然后用REM单位就行，不用愁对照哪个数字了。
3.2使用rem单位
html {
font-size: 16px;
}
搞定了根元素字号之后，使用rem来调整尺寸就轻松！想让小盒子变宽到30px的话，只需设成1.875rem（30÷16=1.875）即可，然后稍微调整一下根元素的字体大小就行了~
四、动态改变根元素的字体大小
.container {
width: 20rem; /* 相当于320px */
height: 10rem; /* 相当于160px */
font-size: 1.2rem; /* 相当于19.2px */
margin-top: 2rem; /* 相当于32px */
}
4.1媒体查询
想要找资料还不容易！调整手机和平板电脑的屏，字号自然跟着变大小。这功能不管什么品牌的电子产品都有，这样看网页就更舒服了。稍微调节一下字体大小的话，感觉就更好了！
4.2 JavaScript动态计算
@media screen and (max-width: 768px) {
html {
font-size: 14px;
}
}
@media screen and (min-width: 768px) {
html {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
html {
font-size: 18px;
}
}
哈喽~告诉你，我们可以用JavaScript在手机网页上改变基本元素的字号！只需要了解下手机屏幕尺寸，就能用一个小公式算出合适的字号，不管什么手机来看我们的页面，都能美滋滋的～
REME真是太棒了，用它做响应式设计超级方便！滑动网页就搞定了，搞程序也没那么难。而且看起来很舒服，美美哒！（Ps.不仅仅是功能，用着也爽）
别忘记按照网页设计要求做好排版哩！使用rem或em这类relative length units，网页看起来更舒适
function setRootFontSize() {
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var fontSize = screenWidth / 10;
document.documentElement.style.fontSize = fontSize + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
。
评论0