rem布局

最新推荐文章于 2024-03-24 14:24:19 发布

0puercha

最新推荐文章于 2024-03-24 14:24:19 发布

阅读量192

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_46370117/article/details/104587281

版权

元素排列方式用浮动做完后要适配不同的移动端设备：横屏后不能自适应？怎么适配？用rem啊!

1.rem是什么？

首先，rem和em都是一个相对单位，1em等于当前元素或父元素的font-size值。当前元素和父元素都设置了font-size值时，根据就近原则，1em就等于当前元素的font-size值，默认情况下，文字是16px,也就是说1em=16px。
1rem等于根元素的font-size值，就是一个html标签的font-size值。
代码展示em和rem的区别

html{ font-size:100px;}
#box1{ font-size:20px;}
#box2{ width:100px; height:100px; background:teal; border-bottom:1em #db1435 solid; border-right:1rem #db1435 solid;}
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>

在这里插入图片描述

2.rem布局的核心思想

就是想办法动态去改变html的font-size，主要是为了更好的适配不同大小的移动端设备对页面进行等比缩放。
页面中的元素用rem作为尺寸或者间距的单位。

3.如何做到font-size动态化？

通过JavaScript
用document.documentElement.clientWidth来获取布局视口的宽度。（学习css时先不考虑此方法）
通过vw
vw（view width）、vh（view height）是相对单位，表示把屏幕自动分成了100份，1vw等于屏幕宽的1%，1vh等于屏幕高的1%；100vh等于屏幕的整个高，100vw等于屏幕的整个宽。
eg:html的font-size值为100px时，要适配iphone6（375px）设备,100px就等于26.6667vw。

html{ font-size:26.66667vw;border:1px black solid;}
#box{ width:1rem; height:1rem; background:teal;}
<body>
    <div id="box"></div>
</body>

在这里插入图片描述

4.rem布局和流式布局比较

rem布局和流式布局都是移动端布局方案，流式布局在大屏幕下会显示更多的内容，而rem布局是元素都整体放大，所以在大屏幕下和小屏幕下显示的内容都一样多；流式布局在宽屏下会有一些比例不协调的现象，而rem就不会出现这种情况。

5.rem实际应用

以iPhone 6设备为例，把iPhone 6屏幕看成100px。

*{ margin:0; padding:0;}
html{ font-size:26.6666667vw;}
body{ font-size:16px;}
#header{height:0.43rem;background:teal;display:flex;line-height: 0.43rem;color:white;}
#header span{margin-left:0.12rem;font-size:0.24rem;}
#header h3{margin-left:1.35rem;}

<div id="header">
   <span class="iconfont iconicon-copy></span>
   <h3>中间</h3>
</div>

在这里插入图片描述

逆战班！不忘初心，砥砺前行

0puercha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
rem布局

元素排列方式用浮动做完后要适配不同的移动端设备：横屏后不能自适应？怎么适配？用rem啊!1.rem是什么？首先，rem和em都是一个相对单位，1em等于当前元素或父元素的font-size值。当前元素和父元素都设置了font-size值时，根据就近原则，1em就等于当前元素的font-size值，默认情况下，文字是16px,也就是说1em=16px。1rem等于根元素的font-size...
复制链接

扫一扫