1.实例演示移动端布局原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/5.css">
    <title>Document</title>
</head>
<body>
    <div class="title">SH-MHH</div>
</body>
</html>

html {
    font-size: 100px;
    font-size: calc(100vw / 3.75);
}
body {
    font-size: 0.16rem;
}
@media (max-width:240px) {
    html {
        font-size: 75px;
    }
}
@media (max-width:320px) and (min-width:239px) {
    html {
        font-size: 87.5px;
    }
}
@media (max-width:460px) and (min-width:319px) {
    html {
        font-size: 106.25px;
    }
}
@media (max-width:480px) and (min-width:459px) {
    html {
        font-size: 118.75px;
    }
}

这次是拿媒体查询,根据从小到大的原理,从宽度最小到最大进行的字体大小进行调整.

2.三大视口与REM-VW换算

视口分为：布局视口、视觉视口、理想视口
- 布局视口：一般是指开发者进行布局时的视口,与具体设备无关,一般宽度为：980PX.
- 视觉视口：一般是指用户通过浏览器浏览到的页面的视口,与各种设备的视觉视口宽度有关,一般宽度为：375PX.
- 理想视口：我个人理解是自适应,不同宽度下,字体等的元素状态与大小也不太一样.

REM-VW换算个人的理解
- 移动端在进行布局时,我们进行布局的是视觉视口宽度,而不是整个硬件宽度,拿iPhone6来说,iPhone6的视觉视口宽度为375,而他的硬件宽度为750,但是我们只用视觉视口的宽度即可.
- 而iPhone6视觉视口宽度为375,意味着占据了整个的页面,所以我们用VW进行设置,而我们怎么求1VW是多少呢？
  - 整个视觉宽度是375,我们可以用100VW来表示,那么1VW就等于375除100就得出来1VW为：3.75
- REM我个人理解为：在HTML中设置一个100PX,为了方便后续计算,而所有代码是写到BODY标签中的,所以在BODY标签中需要进行重置,目的是在于让在BODY标签中的所有元素继承BODY标签的font-size
- REM变为动态值的过程(个人理解)：因为我们已经在BODY标签写入了font-size为：0.16rem,如果说想设置成20PX,只需要20除16等于1.25 = 1.25REM =1.25REM 乘 100PX =125PX

实例演示移动端布局以及三大视口之间的换算关系与rem+vw布局的原理与流程

1.实例演示移动端布局原理

2.三大视口与REM-VW换算

相关文章