移动端布局原理

三大视口

布局视口：面向开发者和设备没有关系默认980px 使用width表示
视觉视口：设备硬件的显示窗口就是视觉视口用device-width表示
理想视口：可以不用缩放就可以看到所有内容的视口就是理想视口/相当于：布局视口 = 视觉视口

所以一开始可以直接使用理想视口进行布局不需要缩放不需要拖动原比例显示initial-scale=1.0

布局三部曲

设置根元素字号为动态值定义一个可以根据宽高进行缩放的大小
在body中将字号重置
使用rem进行布局

怎么设置根元素字号为动态的呢

通常设计师会给一个设计稿有一个通用的公认的稿宽375px
这个375也就是设备上的视觉视口也就相当于100vw == 375px
在这个基础上进行运算

1个vw是多少
1vw = 100vw/100 = 375px/100 =3.75px
可以这样理解1个vw == 3.75px
1个rem是多少
假设人为设置跟字号为100px
那么此时1rem=100px
那么1rem设置为100px是否合适呢
如果1rem设置为一个绝对值那么就会失去响应布局的条件根据vw公示来看
如果设备宽度是414呢
414/3.75 == 110.4px 那么此时1个rem应该等于110.4
但是这个414始终都是100vw 375也是100vw 395也是100vw
那么就可以使用vw来动态的表示rem的值实现移动端布局
正常来写的话：
```
html{
 /*此种方案肯定是不行的不能设置为绝对值
 可以通过一个函数calc来动态计算*/
 font-size:100px;
 font-size:calc(100vw/3.75)
 /*那么此时 不管设备宽度是414还是375还是395还是多少都是自动计算
 100vw=414px 375px 用100vw/3.75 可以动态控制跟字号大小*/
}
```
实例演示：
效果图：

html代码部分

<!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" />
  <title>淘宝首页实例演示移动端布局</title>
  <link rel="stylesheet" href="static/css/demo1.css" />
</head>
<body>
  <header>sxx</header>
  <main>
    <div class="nav">
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
      <a href="">
        <img src="static/images/a.jpg" alt="" />
        <p>天猫新品</p>
      </a>
    </div>
  </main>
  <footer>xxx</footer>
</body>
</html>

css部分

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
/*
三大视口
1.布局视口：面向开发者和设备没有关系 默认980px 使用width表示
2.视觉视口：设备硬件的显示窗口就是视觉视口用device-width表示
3.理想视口：可以不用缩放就可以看到所有内容的视口就是理想视口/相当于：布局视口 = 视觉视口
所以一开始可以直接使用理想视口进行布局 不需要缩放不需要拖动 原比例显示initial-scale=1.0
*/
/*
布局三部曲
1.设置根元素字号为动态值 定义一个可以根据宽高进行缩放的大小
2.在body中将字号重置
3.使用rem进行布局
*/
/*怎么设置根元素字号为动态的呢*/
/*
通常设计师会给一个设计稿 有一个通用的公认的稿宽375px 
这个375也就是设备上的视觉视口也就相当于100vw == 375px
在这个基础上进行运算
1个vw是多少
1vw = 100vw/100 = 375px/100 =3.75px
可以这样理解1个vw == 3.75px
1个rem是多少
假设人为设置跟字号为100px
那么此时1rem=100px
那么1rem设置为100px是否合适呢
如果1rem设置为一个绝对值 那么就会失去响应布局的条件 根据vw公示来看
如果设备宽度是414呢
414/3.75 == 110.4px 那么此时1个rem应该等于110.4
但是这个414始终都是100vw 375也是100vw 395也是100vw
那么就可以使用vw来动态的表示rem的值实现移动端布局
正常来写的话：
html{
    font-size:100px;
    此种方案肯定是不行的不能设置为绝对值
    可以通过一个函数calc来动态计算
    font-size:calc(100vw/3.75)
    那么此时 不管设备宽度是414还是375还是395还是多少都是自动计算
    100vw=414px 375px 用100vw/3.75 可以动态控制跟字号大小
}
*/
/* 1.动态设置跟字号 */
html {
  font-size: calc(100vw / 3.75);
}
/* 2.在body中重置跟字号 */
body {
  font-size: 16px;
  background-color: #f4f4f4;
}
/* 3.通过rem来进行布局 */
header {
  height: 0.5rem;
  width: 100vw;
  /* background-color: #ccc; */
}
main {
  width: 100vw;
}
main .nav {
  background-color: #fff;
  height: 1.46rem;
  width: 3.57rem;
  display: grid;
  grid-template-columns: repeat(5, 0.61rem);
  grid-template-rows: repeat(2, 0.66rem);
  gap: 0.1rem;
  place-items: center;
  place-content: space-between;
  margin: auto;
  border-radius: 0.12rem;
}
main .nav a {
  /* : 0.2rem; */
  margin-bottom: 0.1rem;
}
main .nav a img {
  width: 100%;
}
main .nav a p {
  /* display: block; */
  font-size: 0.13rem;
  height: 0.13rem;
  color: #666666;
  /* margin-top: 0.05rem; */
}
/*假设我们不想让图标无限放大那么咱们只需要用媒体查询限制一下即可以480px为断点最大设置为跟字号20px*/
@media (min-width: 480px) {
  html {
    /* 观察在479px时字号是20px 那么咱们就固定在20px 默认1个rem=100px*/
    /* 计算方式：
        20px是在body的16px上进行放大1.25倍（20/16 = 1.25） 用100*1.25 = 125px
    */
    font-size: 125px;
  }
}

移动端布局详解/实例演示

移动端布局原理

三大视口

布局三部曲

怎么设置根元素字号为动态的呢

相关文章