css三个长度单位 px, rem ,vw

css三个长度单位

px

px单位是绝对单位，无论屏幕窗口多大，文字图片盒子等等都是那么大

rem (现在常用的单位

rem是相对单位，与html文字大小有关系

一般设置html的字体大小为视口宽度的1/10

①通过媒体查询实现

/* 每个视口宽度都要设置相应的字体大小*/
@media (max-width = 375px){
    html{
        font-size: 37.5px;
    }
}
@media (width:414px) {
    html {
        font-size: 41.4px;
    }
}

/*当视口宽度为375px时, 下面是一个长宽都为37.5*5px的盒子*/
/*当视口宽度为414px时, 下面是一个长宽都为41.4*5px的盒子*/
.box {
    width: 5rem;
    height: 5rem;
    background-color: pink;
}

②flexible.js

媒体查询写起来太麻烦了，而且检测不够精确，因此我们使用flexible.js这个js文件，通过js实时检测屏幕窗口的变化实现检测视口宽度

<script src="./js/flexible.js"></script>

如何把px转换为rem

直接使用测量的px值 / 37.5 → 就是rem的值

开发时通常以视口宽度375px的尺寸为基准

vw/vh (未来的趋势

vw就是视口的宽度，是个相对的单位

vh是视口的高度，因为高度根据内容会一直变且不确定，所以只用vw单位

不管在什么屏幕下，我们把屏幕分为平均的100等份

1vw = 1/100屏幕的宽度

px如何转换为vw

用测量的px值 / 3.75 → 就是vw的值