网上科普有关“如何使用rem单位”话题很是火热 ，小编也是针对如何使用rem单位寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题，希望能够帮助到您 。
!new function(){var a=this;a.width=750,a.fontSize=100,a.widthProportion=function(){var b=(document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/a.width;return b>1?1:b},a.changePage=function(){document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+a.widthProportion()*a.fontSize+"px !important")},a.changePage(),window.addEventListener("resize",function(){a.changePage()},!1)};
引入这段js代码，设计图的750px = 7.5rem 。
记得在css设置默认字体大小 body{font-size: 0.3rem;}
举例：.div1{width: 7.5rem;height: 1rem;}
em ：作为font-size单位时 ，其代表父元素字体大小 ，作为其他属性（line-height）单位时，代表自身字体大小
例：
<div >
<div ></div>
</div>
第二个div的font-size:2em=2 16px=32px
line-height:2em=2 32px=64px
rem ：作用于非根元素时 ，相对于根元素字体大小；作用于根元素字体大小时 ，相对于其初始字体大小(浏览器默认字体大小)
例：
html{font-size:2rem} 2 16px=32px
p{font-size:2rem} 2 32px=64px
综上，em是为字体和行高而生的 ，有时候子元素字体就应该与父元素相关。而rem布局的本质是等比例缩放
①让根元素的字体与屏幕宽度产生关系 ，即随屏幕宽度变化而变化
②其他元素的大小根据根元素字体生成rem单位，例如：
html{font-size:width/100},假设设置根元素字体为屏幕宽度的1% ，（注意：屏幕宽度是动态变化的） ，则屏幕宽度的1%就代表1rem。假设现在有p元素，我们就可以作如下设置：
p{width:5rem;},则p的宽度就为屏幕的5%
现在你明白rem的原理了吧 ，那如何动态获取屏幕宽度呢？这里我们介绍两种方法：
①通过js设置
window.onload=function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/100 +'px'
}
这样就实现了设置根元素的字体大小为屏幕宽度的1%
②vw
CSS3引进了vw vh的概念 ，vw是指视口宽度的1%；vh是指视口高度的1% 。因此我们就可以直接作如下设置：
p{width:5vw}
vw缺点就是兼容性没有rem好
rem是弹性布局的一种实现方式，强调的是等比例缩放，弹性布局是响应式的一种 。响应式布局强调的是不同屏幕要有不同的显示（例如我有行照片墙 ，在PC iPad 手机都一行展现不同的数目 ，你可能会想到flex）
①字体不能用rem
字体不是线性关系，设置了根元素字体大小 ，会影响所有没设置字体大小的元素 ，因为 字体会继承
字体如何实现响应式：通过body字体的大小来实现，同时所有设置字体的地方都用em ，例：
body{font-size:16px;}
p{font-size:1.2em;}
但是我们一般遇到的设备有手机、iPad 、电脑 ，如果想要实现不同宽度字体显示大小不一样，可以使用媒体查询：
@media screen and (min-width:320px){
body{font-size:16px;}
}
@media screen and (min-width:480px){
body{font-size:18px;}
}
@media screen and (min-width:960px){
body{font-size:20px;}
}
②根元素字体小于浏览器默认字体
假设屏幕宽度是780px ，html字体大小780/100=7.8px ，小于浏览器默认字体16px，怎么办。这个时候可以设置html字体大小780/10=78px,则其他元素的参考1rem就是屏幕宽度的1/10 ，再根据这个参考系来计算 。其实道理是一样的
参看链接：
① Rem布局的原理解析
关于“如何使用rem单位 ”这个话题的介绍 ，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[尔安]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2208.html
评论列表（4条）
我是石号的签约作者“尔安”！
希望本篇文章《如何使用rem单位》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“如何使用rem单位”话题很是火热，小编也是针对如何使用rem单位寻找了一些与之相关的一些信息进行分析，如果能碰巧解决你现在面临的问题，希望能够帮助到您。!new...