移动端第六天屏幕适配

聊了
260 阅读2分钟

移动端第六天屏幕适配

vwh和vh的作用

vw是相对长度单位， 相当于视口的宽度 100vw 等于屏幕宽度
  • 参照的根标签（html）的fontsize
  • 如果自己不设置html的字体大小，1rem（谷歌浏览器默认的字体大小是16px）
  • 如果设置了html的字体大小 设置为1px,但是对于字体来说 最小还是12px(谷歌) 火狐（最小文字1px）
vh 是相对长度，相对于视口的高度，100vh等于屏幕高度
作用：
  • 实现移动端屏幕适配 屏幕越大，看起来里面的元素就越大
  • 小一点的屏幕 看起来里面的元素就越小
  • 小结
    rem 大小是相对于页面根标签的字体大小

    ​ 不要去研究 rem小于 12的时候的情况（自己设置尽可能将 html的字体设置为大于等于12 避免问题即可）

使用rem实现屏幕的宽度改变

1 引入一段 手机淘宝写好的js代码 （flexible.js ） (学习如何引入js代码)

​

 <script src="./flexible.js"></script>
2.现在观察一下 屏幕宽度和html的字体大小的关系
10倍根标签的字体大小 = 屏幕的宽度
  根标签的字体大小  =  1rem

  10rem =  10倍根标签的字体大小  =   屏幕的宽度

  10rem = 屏幕的宽度

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>08-rem实现屏幕适配.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .d1{
        /* 改成rem单位 */

        width: calc(10rem  * 100 / 375);
        height: calc(10rem  * 50 / 375);
        background-color: aqua;
      }
      .d2{
        width:calc(10rem  * 200 / 375);
        height: calc(10rem  * 80 / 375);
        font-size: calc(10rem  * 40 / 375);
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2">d2</div>
  </body>

  <!-- 1 必须要引入js -->
  <script src="./flexible.js"></script>
</html>

使用vw实现屏幕适配

vw做屏幕适配.png

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-vw做屏幕适配.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .d1{
        /* 
        width: 
         */
        width:  calc(100vw * 100 / 375) ;
        height:  calc(100vw * 50 / 375) ;
        background-color: aqua;
      }
      .d2{
        width:  calc(100vw * 200 / 375) ;
        height:  calc(100vw * 80 / 375) ;
        font-size:  calc(100vw * 40 / 375) ;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="d1"></div>
    <div class="d2">第二个div</div>
  </body>
</html>

vscode插件安装

安装px2vw

vscode插件.png

设置代码
"px2vw.width": 375,

calc的使用

屏幕适配2.png

微信截图_20220321173244.png

屏幕适配

微信图片_20220321105449.png

微信截图_20220321165752.png 总结

rem的作用是和vw 一样,也是用来解决 移动屏幕适配

1.vw 做屏幕适配

2.rem 做屏幕适配

  1. 公司 中两种方案 都有在使用
  2. 如果让我来选择，选择vw 简单b方便实用

1.安装

px to rem

vw 相对长度单位

100vw=屏幕的宽度

rem 相对长度

​ 相对于根标签的字体大小

屏幕适配的公式 要适配的元素的宽度 =屏幕的宽度 * 设计稿中的元素的宽度/设计稿的宽度

10rem 要引用 flexible.js

选择vw还是rem 首选vw

总结.png

avatar
文章
阅读
粉丝