1、使用 媒体查询+rem单位
原理:利用媒体查询检测设备的特性,根据设备来改变根节点的字体大小
实现步骤:
(1)通过媒体查询来改变根节点的字体大小
@media all and (min-width: 320px) {
html {
font-size: 32px;
}
}
@media all and (min-width: 375px){
html{
font-size: 37.5px;
}
}
(2)页面当中元素的布局都用rem单位,就能达到适配的状态
div {
width: 10rem;
height: 100px;
background: red;
}
缺点:不能精细的适配到每一个设备,代码量较大
具体详解点击查看
2、使用vw单位 + rem单位布局
原理:屏幕大小变化的时候,用vw作为单位的值也会跟着改变,用vw作为根节点的字体大小的单位,所以在不同的屏幕大小或者设备中,根节点的字体大小的值就不一样,rem单位得到的值就不一样
实现步骤:
(1)使用vw单位作为 HTML font-size的单位(计算)
// 如果设计图为750px,那么我们需要设置一下代码
html{
font-size: 13.33333333vw
}
(2)页面所有布局使用rem单位
div{
//这样我们写1rem即为设计稿上的100px
width:1rem; // 在页面中显示的值为 50px
height:1rem;
}
问题:为什么根节点字体大小为写13.33333333vw,为什么100px = 1rem?
750px = 100vw
1px = 100 / 750 = 0.133333333333333vw
100px = 0.133333333333333vw *100px = 13.33333333vw
rem的 值是根据 跟根节点的字体大小来计算的,设置根节点的字体大小为100px,是为了方便计算
最终于得出 100px = 1rem
3、使用js + rem单位布局
原理:通过js获取设备的宽度,来计算根节点的字体大小,rem得出来的值就不一样,就到达不同页面能适配
我们可以在编辑器里面安装一个扩展插件来自动计算px---->rem
(1)在vscode的扩展里面安装插件:cssrem
(2)然后在vscode配置文件中更改:rootfontsize为设计图 / 10的数字
(3)在页面中使用script标签引入获取设备的特性更改根节点地质体大小的 js文件
(4)在页面中的所有布局都用rem作为单位,设计图量处的值为多少就写多少,但是要选择转换成rem的那个值
4、使用sass + vw单位布局
原理:使用vw作为页面所有元素的布局单位,简化之前rem + vw结合的布局
(1)使用sass的函数:
@function vw($px) {
@return ($px / 设计图的宽度) * 100vw;
}
(2)页面中布局
header {
height: vw(量出来的值);
background: green;
font-size: vw(48);
}