简单来说,使用rem布局,在设置字体,宽高等大小时,是由html根元素的font-size决定的,并不一定是真实的font-size大小;
例:当html的font-size为100px时,此时0.2rem == 20px;
<style>
html {
font-size: 100px;
}
.p1 {
font-size: .2rem;
}
.p2 {
font-size: 20px;
}
</style>
<body>
<p class="p1">我是rem布局</p>
<p class="p2">我是rem布局</p>
</body>
html {
font-size: 50px;
}
.p1 {
font-size: .2rem;
}
.p2 {
font-size: 10px;
}
所以说,rem布局是由根元素的font-size决定的,设置html的font-size(px),可以实现一些需求,比如“大中小”字体的切换,只需改变html的font-size即可;但同时会存在一些问题:
<style>
html {
font-size: 100px;
}
.p1 {
font-size: .2rem;
}
</style>
<body>
<p class="p1">我是rem布局我是rem布局我是rem布局</p>
</body>
上面的布局,在不同的手机屏幕尺寸下,有的一行可以展示,有的却会换行,这就有可能导致布局上出现问题;
屏幕的宽度 = 100vw ;
vw的计算方式 100 / (UI图纸的宽度 / 100);
例
<style>
/* 假设UI图宽668px vw = 100 / (668 / 100) ≈ 14.97 */
html {
font-size: 14.97vw;
}
.p1 {
font-size: .2rem;
}
.p2 {
font-size: 20px;
}
</style>
<body>
<p class="p1">我是rem布局</p>
<p class="p2">我是rem布局</p>
</body>
<style>
/* 假设UI图宽668px vw = 100 / (668 / 100) ≈ 14.97 */
body {
margin: 0;
padding: 0;
}
html {
font-size: 14.97vw;
}
.p1 {
font-size: .2rem;
}
.p2 {
font-size: 20px;
}
</style>
<body>
<p class="p1">一二三四五六七十一二三四五六七十一二三四五六七十一二</p>
<p class="p2">一二三四五六七十一二三四五六七十一二三四五六七十一二</p>
</body>
在实际开发中,可根据实际需求,选择不同的实现方式;
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- howto234.com 版权所有 湘ICP备2022005869号-3
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务