05_移动端网页适配

最新推荐文章于 2024-04-13 13:14:42 发布

lambo mercy

最新推荐文章于 2024-04-13 13:14:42 发布

阅读量416

点赞数

分类专栏：前端文章标签： servlet javascript html

本文链接：https://blog.csdn.net/m0_65601072/article/details/127332160

版权

前端专栏收录该内容

27 篇文章 3 订阅

订阅专栏

屏幕尺寸

屏幕对角线的长度，一般用英寸来度量

PC 分辨率

1920 * 1080

1366 * 768

硬件分辨率物理分辨率不可改变，固定的
软件分辨率逻辑分辨率由软件驱动决定

移动端主流设备分辨率

手机型号	物理分辨率	逻辑分辨率	比例关系
iPhone6/7/8	750 * 1334	375 * 667	2:1

视口的作用:网页宽度 = 逻辑宽度

视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

二倍图：750px

移动适配

解决方案：

rem 目前
vw/vh 未来

rem

rem 单位

相对单位
rem 单位是相对于 HTML 标签的字号计算结果
1rem=1HTML 字号大小

实现效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）

示例:

<body>
    <style>
        /* html字号默认 16px */
        .box {
            /* 16 * 5 = 80px */
            width: 5rem;
            /* 16 * 2 = 32px */
            height: 2rem;
            background-color: skyblue;
        }
    </style>

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

使用 rem 需要解决的问题

不同设备屏幕尺寸，设置不同的 HMLT 标签字号
设备宽度不同，HTML 标签字号设置多少合适

rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度 1/10

rem 单位尺寸

确定设计稿对应的设备 HTML 标签字号

基准根字号 = 设备宽度（视口宽度）/ 10

rem单位的尺寸 = px单位数值 / 基准根字号

eg:

设计稿设备宽度 375px
设计稿元素宽度 75px
rem宽度 = 75px / (375px / 10) = 2rem

媒体查询

媒体查询根据不同的视口宽度，设置差异化 css 样式

@media (媒体特性) {
  /* css样式 */
}

/* eg:  */

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

@media (width: 320px) {
  html {
    font-size: 32px;
  }
}

示例:

<html>

<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

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

        @media (width: 320px) {
            html {
                font-size: 32px;
            }
        }

        .box {
            width: 5rem;
            height: 2rem;
            background-color: skyblue;
        }
    </style>

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

</html>

flexible.js

flexible.js 适配移动端的 js 框架

原理：根据不同的视口宽度，给网页 html 根节点设置不同的 font-size

github: GitHub - amfe/lib-flexible: 可伸缩布局方案

示例:

<html>

<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

<body>
    <style>
        .box {
            width: 5rem;
            height: 2rem;
            background-color: skyblue;
        }
    </style>

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

    <script src="https://cdn.jsdelivr.net/npm/amfe-flexible@2.2.1/index.min.js"></script>
</body>

</html>

长度单位：vw/vh

相对单位
相对视口的尺寸计算结果

含义

vw: viewport width
vh: viewport height

换算方式

1vw = 1/100视口宽度

1vh = 1/100视口高度

vw单位的尺寸 = px单位数值 / ( 1 / 100 * 视口宽度) 例如：

357px宽的设备
1vw = 357px / 100 = 3.57px

// index.less
// 375的设计稿：68 * 29
.box {
  width: (68 / 3.75vw);
  height: (29 / 3.75vw);
}

统一使用 vw 或者 vh 作为单位

lambo mercy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05_移动端网页适配

原理：根据不同的视口宽度，给网页 html 根节点设置不同的 font-size。rem 布局方案中，将网页等分成 10 份，HTML 标签的字号为视口宽度。vw单位的尺寸 = px单位数值 / ( 1 / 100 * 视口宽度)rem宽度 = 75px / (375px / 10) = 2rem。rem单位的尺寸 = px单位数值 / 基准根字号。不同设备屏幕尺寸，设置不同的 HMLT 标签字号。设备宽度不同，HTML 标签字号设置多少合适。基准根字号 = 设备宽度（视口宽度）/ 10。
复制链接

扫一扫

专栏目录