前端从0到1--媒体查询&移动端适配

SuperBeiBei03
1,549 阅读3分钟

一、媒体查询

1.概念

  • 媒体查询Media Queries,可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式，页面布局分别适应移动端，pc端等，在调整浏览器大小页面会根据媒体的宽度和高度来重新布置样式。媒体查询可以用于检测很多东西：自动检测视口(viewpoint)的宽度和高度；设备的宽度和高度；旋转方向（智能设备的横竖屏）;分辨率大小。
  • 语法
    @media(条件){区域{样式}} 
<!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>Document</title>
    <style>
        /* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */

        /* 宽度300px的时候 给html设置30px的字体大小 */
        @media (width: 300px) {
            html {
                font-size: 30px;
            }

            body {
                background-color: #0a0;
            }
        }

        /* 宽度400px的时候 给html设置40px的字体大小 */

        @media (width: 400px) {
            html {
                font-size: 40px;
            }

            body {
                background-color: #ff0;
            }
        }
    </style>
</head>
<body>
</body>
</html>

二、移动端适配

1.单位

  • 绝对单位 100px 360deg 60s 1000ms等固定单位
  • 相对单位
    • em 参考当前容器的文字大小
    • rem 参考根据html标签的文字大小
    • % 百分比大小
    • vw 参考视口宽度进行计算
    • vh 参考视口高度进行计算

2.rem适配
1.媒体查询的适配

  • 利用媒体查询针对各个屏幕尺寸去设置一个不同的根字体标签大小。由于我们开发者书写的是一个固定的rem值，根据rem要乘以跟标签字体大小去计算的原理，即可实现适配
  • 缺点：屏幕尺寸非常多 书写起来过于繁琐

2.手淘团队封装的flexible.js框架配合px to rem插件快速实现适配

  • 1.下载flexible.js文件 地址:github.com/pjehan/Flex…
  • 2.引入方式 <script src="./flexible.js"></script>
  • 3.原理：利用js的方式给每一个屏幕尺寸都设置一个根标签的字体大小（当前屏幕宽度的尺寸/10)

3.如何计算rem值

  • 1.公式：？rem=测量出的宽度数值/ui设计师给的设计稿对应的根标签字体大小
  • 2.注意：移动端使用的是二倍图 如果ui设计师给的是一张750的设计稿 所以设计稿尺寸应该除以2 真实尺寸应该是375，根标签字体大小应该是37.5
  • 3.VsCode推荐插件 px to rem 设定好宽度一键转换rem值（力推）

4.px to rem使用方法
1.VsCode插件商店搜索px to rem 点击安装（有很多个建议使用推荐的插件 如下图）

Snipaste_2022-01-13_16-14-18.png
2.安装完毕后，点击齿轮图标进行默认宽度设置自定义更改不是固定值（看具体需求）

Snipaste_2022-01-13_16-14-33.png

Snipaste_2022-01-13_16-15-27.png 3.由于插件无法直接设置小数，可以打开右下角设置，搜索找到setting.json文件 进行调整

Snipaste_2022-01-13_16-15-13.png

Snipaste_2022-01-13_16-15-46.png

3.vw、vh适配

  • 1.概念
    • 相对视口的尺寸进行计算结果
    • vw （viewport width）根据视口宽度进行计算结果 1vw=1/100视口宽度
    • vh （viewport height）根据视口高度进行计算结果 1vh=1/100视口高度
  • 2.适配原理
    • 1.vw： 确定设计稿对应的vw尺寸(1/100的视口宽度)
      • 查看设计稿宽度-->确定参考设备宽度(视口宽度）-->确定vw尺寸(1/100视口宽度)
      • vw单位的尺寸=px/（1/100视口宽度）
    • 2.vh： 确定设计稿对应的vh尺寸(1/100的视口宽度)
      • 查看设计稿高度-->确定参考设备高度(视口高度）-->确定vh尺寸(1/100视口高度)
      • vh单位的尺寸=px/（1/100视口高度）
    • 3.注意：在世纪开发中，vw和vh不会混用， 在实现不同宽度设备中，网页元素尺寸会等比例缩放，vh是1/100视口高度，全面屏视口高度大，如果昏庸可能导致变形。

    rem适配

<!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>rem适配</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }

        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }


        /* 2. 书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

vw/vh Demo

<!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>体验vw和vh</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 1. vw = 1/100视口宽度 */


        /* 2. vh = 1/100视口高度 */

        .box {
            width: 100px;
            height: 100px;
            border: 10px solid #000;
        }

        .son {
            width: 1vw;
            height: 50vw;
            background-color: #0a0;
        }
    </style>
</head>

<body>
    <!-- 创建一个屏幕宽度一半的正方形 -->
    <div class="box">
        <div class="son"></div>
    </div>
</body>

</html>
avatar
文章
阅读
粉丝