移动web适配:rem适配 vw/vh适配

rem适配

1.rem 单位

rem 是一个相对单位，1rem 就是 html 文字的大小

比如

html {
    font-size: 35px;
}

则此时 1rem 就是 35像素.

2.如何让网页的内容随着设备的不同而自动适配大小?

媒体查询 mediaquery 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小.

使用媒体查询, 根据不同的视口宽度, 设置不同的(html)根字号 ，就完成了适配

语法：

​这里我们以iPhone 6/7/8 的设备宽度来举例
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
​我们在开发中 一般把设备的宽度分为10等份,一份为37.5  以方便计算

综合：

@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}

.box {
/*这时的5rem就等于 5 * 37.5*/
    width: 5rem;
    height: 5rem;
    background-color: pink;
}

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

rem适配是现在使用最多的,但是需要频繁的通过媒体查询来监控用户的设备宽度,所以我们一般搭配js来使用

我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

VW/VH

vw

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

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

1vw = 1 / 100 屏幕的宽度

简单理解1vw就是屏幕的1%

px 如何转为vw

例如我们的设计稿为 iphone 678 设备宽度是 375px  那么1vw 就等于 3.75

如果我们要写一个高100 px宽100 px的盒子,记得带上单位vw

.box {

width: (100 / 3.75vw);
height: (100 / 3.75vw);
}

 vh

VW代表宽度,VH代表高度,我们开发中一般为了方便,统一用vw来表示长度,不管是高度还是宽度

rem与vw的区别

rem需要媒体查询来获取设备的宽度,而vw可以直接使用,相对于来讲xw更方便.但是当我们在PC端使用时vw会存在兼容问题,需要调整兼容性.

vw适配是一种趋势,以后的移动web开发,可能会更多的使用vw适配