em,rem,px,rpx,vw,vh的区别与使用

最新推荐文章于 2024-02-07 11:22:35 发布

是馒头妹妹呀

最新推荐文章于 2024-02-07 11:22:35 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：前端移动适配前端单位转换 rem、和vw、vh的区别 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_62877814/article/details/129046676

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。rem是CSS3新增的一个相对单位（root em，根em）

三、em是相对于其父元素的字体大小来设置的，一般都是以的“font-size”为基准。这样就会存在一个问题，如果我想对某个特定的元素的进行字体大小设置，那么他所有的子元素都会以他为基础，就会导致整个页面内元素所占比例与UI定稿不一样。而rem是相对于html根元素的“font-size”为基准，这样就意味着，我们只需要在根元素确定一个参考值。(如果还想让字体为16px,直接通配符先设置16px,html再设置10px即可)

注：任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px，1rem=16px

em:

    <style>
        .father{           
            width: 300px;
            height: 300px;
            background-color: aqua;
         
        }
        .child{
            font-size: 10px;//father1和child一样大，重新规定font-size为10，
            //所以1em=10px,em继承父元素，渲染时他会从自身向外找，自己有就用自己
            //的font-size标准，没有再用最近的父元素的，默认最顶层是html是1em=16px
            width: 30em;
            height: 30em;
            background-color: blue;
            
        }
       
    </style>

<body>

    <div class="father">
        <div class="child"></div>
  
    </div>
</body>

rem:

 <style>
    
        html{
            font-size: 10px;
        }
        //child2和child3都是30px,只会继承根元素html，默认是1rem=16px
        .child2
        {
            font-size: 50px; 
            width: 3rem;
            height: 3rem;

        }
        .child3
        {
            
            width: 3rem;
            height: 3rem;
        }


    </style>

<body>
        <div class="child2"></div>
        <div  class="child3"></div>
</body>

使用场景:

rem的使用场景：一般移动端的UI设计稿的宽度分为640px,和750px两种,但是要想使用一份代码就适配所有屏幕，就必须使用相对单位，这时候使用rem是最好的选择。

我们将UI设计稿人为均分成几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其html根元素的字号大小设置为均分后的每一等份的大小。

如：UI设计稿宽度为640px,我们将UI设计稿均分为20等份,那么我们就可以通过媒体查询，给320px的屏幕设置HTML根元素的字号大小为16px（320/20）,给640px大小的屏幕设置html根元素字号大小为32px(640/20),则我们在后续书写代码的时候，ui设计稿上的一个div的盒子宽度为160px,我们使用rem单位将其表示为width：5rem,则此盒子无论在320px的屏幕下还是在640px的屏幕下都将显示为屏幕的四1/4的宽度。

简便方法：

我们在使用rem时，每一个元素的大小都将从设计稿的px转换为rem相对单位，非常麻烦。遇到不能整除的数值还会导致最后页面数值的不精确，在这种情况下我们，可以使用淘宝开发的flexible.js插件，配合开发工具vs code的cssrem插件，可避免做媒体查询与数值的转换。（前者避免媒体查询，后者避免做数值转换）

rpx：是微信小程序独有的，是小程序中使用的相对单位，可以根据屏幕宽度进行自适应，不论屏幕大小。用法和rem类似。

rpx与px之间的换算，以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx=0.5px=1物理像素

在css3中vw与vh: vw单位可以根据窗口的宽度自动改变大小，“1vw”是窗口宽度的“1%”；vh单位可以根据窗口的高度自动改变大小，“1vh”是窗口高度的“1%”，和px，rem等类似，属于长度单位

vw 可以帮助我们实现移动端自适应布局，其优点在于所见即所得，甚至优于rem，因为完全不用使用额外的计算。

推荐和sass、less这种css预处理语言一起使用，因为其可以定义变量及函数，会在使用vw上提供巨大帮助。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

vh：视窗高度的百分比

vmin：取当前Vw和Vh中较小的那一个值

vmax：取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度， 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px 。