rem和vw的分析比较

rem:

首先rem是css单位,相比于px固定的像素单位,rem是相对像素单位,更加的灵活。

需求存在:

现在移动端各种屏幕的出现,适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。

一、基本原理:

设计稿宽度:x px
移动设备宽度:y px
Html中font-size=移动设备宽度/设计稿宽度*100
Font-size的值即是1rem=(font-size) px

二、如何根据不同屏幕设置 font-size 大小

1、媒体查询

<style type="text/css">   
   @media screen and (max-width: 320px) {
        html {
          font-size: 20px;
        }
      }  
    @media screen and (max-width: 360px) and (min-width: 321px) {
        html {
          font-size: 24px;
        }
      }
</style>

2、使用 js 方式

<script type="text/javascript">
    // 获取视窗宽度
    let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth
    console.log(htmlWidth)
 
    // 获取视窗高度
    let htmlDom = document.getElementsByTagName('html')[0]
 
    htmlDom.style.fontSize = htmlWidth / 10 + 'px'
</script>

rem的缺点:需要引入一段JS代码,这样违背了样式行为分离的思想,而且耦合深,无法解耦

vw是不是比rem更好的方案?

vw —— 视口宽度的 1/100
vh —— 视口高度的 1/100

不用通过js计算,直接使用即可,但是兼容性却不如rem。

VW的完全兼容需要Android4.4+和ios8+

rem的完全兼容需要Android2.1+和ios6+

另外在使用弹性布局时,一般会限制最大宽度,比如在pc端查看我们的页面,此时vw就无法力不从心了,因为除了width有max-width,其他单位都没有,而rem可以通过控制html根元素的font-size最大值,而轻松解决这个问题

所以rem+vw才应该是最好的方案

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值