阅读本篇文章,你将大致了解到手机专用的自适应方案--移动端REM的应用
什么是rem
- css中长度单位有很多,比如:px,em,rem,vh,vw,ex,in,pt等.其中rem
是根据根元素html的font-size来确定的,所以我们可以通过用js来修
改html里的font-size来达到自适应的效果.
看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div{
background: #ccc;
height:2rem;
width:2rem;
}</style>
</head>
<body>
<div></div>
</body>
</html>
效果
得到一个32px的方形.大多数的浏览器默认字体大小都是16px.
我们通过js修改html里font-size,在移动端通常让rem与窗口宽度绑定.
在
</body>前加上js代码
<script>
var webWidth=window.innerWidth
document.write('<style>html{font-size:'+webWidth/10+'px;}</style>'); //这里的10是一个自
//己取的数,不能让不能给html font-size设置小于12px的值,因为部分浏览器(如chrome)会检测这个值,
//若小于12px则改为12px.
</script>
这样就把rem与窗口宽度绑定成功了.但是要注意不能让不能给
html font-size设置小于12px的值,因为部分浏览器(如chrome)会检测这个值,
若小于12px会将其改为12px从而出bug.
效果
在完成rem与窗口的绑定后,再写元素高宽度后即可用rem单位,但是每次使用都需要自行换算,在此
可用sass在内部写个sass function减轻工作量.可以参考如何安装sass以及使用sass完成px2rem操作.
网友评论