动态REM

2020-11-02  本文已影响0人  小鸡咯咯哒

常用单位

px:像素
em:相对长度单位。表示元素的font-size的计算值。如果用在font-size属性本身,它会继承父元素的font-size。
rem:相对于根元素(即html元素)font-size计算值的倍数
vh:相对于视口的高度。视口被均分为100单位的vh
vw:相对于视口的宽度。视口被均分为100单位的vw

动态REM的思路

让rem与移动设备视口关联,动态调节rem。整体缩放页面中元素,来适配手机端

1rem == htmi:font-size == viewportWidth

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
   var pageWidth = window.innerWidth
    document.write('<style>html{font->size:'+pageWidth+'px;}</style>')
</script>

rem可以和其他单位混合使用,例如border的设置可以用px

上一篇 下一篇

猜你喜欢

热点阅读