移动端适配

文章目录

• 移动端适配
• 一、移动端适配
• • 1.一些概念理解
  • 2，移动端适配的方案

一、移动端适配

1.一些概念理解

1.rem和em的区别

两者都是相对单位，rem以html的font-size作为参照物设置标签大小；em以父元素的font-size作为参照物设置标签大小，这和百分比类似。因此em % vh vw它们更适合小范围的使用，不适合大篇幅使用。

2.px为什么不能进行适配？

px是css像素（逻辑分辨率），是前端的一个尺寸单位；物理像素，是由一个个的像素点构成的整个屏幕，每个屏幕的物理像素点是一定的。针对1px的css像素去覆盖占用的物理像素点，是动态变化的。当屏幕变大，也就是物理像素点变大了，这只会导致1px所占用的物理像素点减少；反之，则导致1px所占用的物理像素点变多。然而！这就表示无论，屏幕大小怎么变化，物理像素点怎么变化，这跟px没有任何关系！应该是50px的宽度，无论屏幕怎么变大变小，永远都是一样的大小。所以这就是px不能进行适配的原因。

[email protected]媒体查询 + rem可利用的插件

计算公式：html中font-size大小*rem单位的标签大小=px单位的标签大小

如果手动每次设置大小都自己计算，这太累了！vscode中有插件：px to rem & rpx (cssrem),在插件的扩展中，可以设置基准的font-size，以及css分辨率和规定屏幕宽度。

4，响应式页面和移动端页面区别

响应式页面：页面的布局结构(样式等)会随着页面大小的变化而变化。

移动端页面：页面元素的大小会随着手机尺寸大小的变化而变化，而布局样式等不发生改变。

2，移动端适配的方案

1. 百分比单位：布局采用百分比的形式进行书写。（缺点：每一级父元素都必须设置宽高）

2. vh和vw单位：vw（view width）/ vh (view height) , 它们始终都是以浏览器的可视区域大小为参照物。视口（viewport）将整个浏览器的宽度视为100vw，不管浏览器有多宽，始终都是100vw。不管浏览器有过高，始终都是100vh。是一个相对单位。。（缺点：始终需要以窗口作为参照物设置大小）

3. 弹性布局：利用弹性布局的时候可以对子元素进行缩放，因此这里可以正常设置px单位

4. @media媒体查询+rem组合：(常用)

1. html根标签font-size单位px + @media媒体查询 + rem：

<!-- 
    步骤：
    1. 将任意一个大小的手机屏幕尺寸，进行 20等份/15等份/10等份 的平分，比如  414px / 20 = font-size；375px / 20 = font-size；320px / 20 = font-size；
    2. 一般将 逻辑分辨率375px 对应的物理分辨率是750px 作为标准，这个尺寸下的参照物称为设计稿；
    3. 将设计稿中标注的尺寸，转化为rem单位；其他尺寸下，rem不变，但是font-size是动态变化的。根据动态变化的font-size以及rem，最终计算出来不同尺寸下元素的大小；
    -->
    @media screen and (max-width: 750px) {
        html {
          font-size: 37.5px;
        }
      }
      @media screen and (max-width: 720px) {
        html {
          font-size: 36px;
        }
      }
      @media screen and (max-width: 540px) {
        html {
          font-size: 27px;
        }
      }
      @media screen and (max-width: 480px) {
        html {
          font-size: 24px;
        }
      }
      @media screen and (max-width: 424px) {
        html {
          font-size: 21.2px;
        }
      }
      @media screen and (max-width: 414px) {
        html {
          font-size: 20.7px;
        }
      }
      @media screen and (max-width: 400px) {
        html {
          font-size: 20px;
        }
      }
      @media screen and (max-width: 384px) {
        html {
          font-size: 19.2px;
        }
      }
      @media screen and (max-width: 375px) {
        html {
          font-size: 18.75px;
        }
      }
      @media screen and (max-width: 360px) {
        html {
          font-size: 18px;
        }
      }
      @media screen and (max-width: 320px) {
        html {
          font-size: 16px;
        }
      }
           

1. html根标签font-size单位vw + rem：

<!-- 
     <!-- 
    100vw: 和屏幕尺寸一样宽
    设计稿屏幕逻辑像素375px，375px=100vw  1px=0.1333333vw
    设计稿中的100px*100px的尺寸大小：13.333vw*13.3333vw

    将html的font-size设置为vw单位: font-size: 13.3333vw

    两个问题：
    1. font-size为什么要设置为13.3333vw。
      将屏幕逻辑像素中的1px转化为vw单位，计算公式：1px=100vw/屏幕逻辑像素。如果屏幕逻辑像素是375px,计算会得到1px=0.1333……vw,于是将标签的px转化为rem单位就太简单了！
      将标签px单位转化为rem单位，计算公式：rem单位标签大小=px单位标签大小/html的font-size 。于是，1rem=1px/0.1333……vw  ===>也就是  1px/1rem=0.133……vw  ，这时候，如果标签大小不是1px而是100px,对应rem就要扩大100倍，变成100rem,这种感觉就很麻烦，所以就可以回答问题2: 1px = 0.133333vw为什么要乘以100px。
    2. 1px = 0.133333vw为什么要乘以100px。
      为了让100px对应为1rem,10px对应为0.1rem……(如果font-size不乘以100，100px对应为100rem,10px对应为10rem……)
    -->