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

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

MarkDown常用语法、Emmet常用语法

2022-07-02 20:54:03