(day17)web移动端布局

最新推荐文章于 2022-03-10 19:00:00 发布

前端尨猫

最新推荐文章于 2022-03-10 19:00:00 发布

阅读量109

点赞数

分类专栏：前端学习之路文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/qq_43954443/article/details/120005092

版权

前端学习之路专栏收录该内容

39 篇文章 2 订阅

订阅专栏

1、meta标签

meta标签也叫元标签

meta标签的使用：

忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />
忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />
当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

2、常见概念

1、屏幕尺寸：指的是屏幕对角线的长度

2、分辨率：是指宽度上和高度上最多能显示的物理像素点个数

3、点距：像素与像素之间的距离，点距和屏幕尺寸决定了分辨率大小

4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度

5、DPI:每英寸像素点，印刷行业术语。对于电脑屏幕而言和PPI是一个意思

6、设备像素(又称为物理像素): 指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关，单位 pt。

7、设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

8、css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是设备像素(device pixel)

9、DPR(设备像素比)：设备像素比 = 设备像素（物理像素） / 设备独立像素（逻辑像素）。(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)

以iphone6为例：

        设备宽高为375×667，可以理解为设备独立像素(或css像素)。

        dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。

        对于这样的css样式：

        width: 2px;

        height: 2px;

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

        在普通屏幕下，1个css像素对应 1个物理像素(1:1)。

        在retina 屏幕下，1个css像素对应 4个物理像素(1:4)

移动端的适配有多种方式，介绍以下几种：

3、媒体查询+rem 适配

移动端布局需要了解的：

rem：相对单位，相对于根元素(HTML)的font-size进行计算

计算公式：设备像素比 = 物理像素 / 逻辑像素

设备像素比 dpr

物理像素 UI设计图

逻辑像素前端需要设置的css样式的值

牢记：计算公式：逻辑像素 = 物理像素 / dpr

让div盒子在不同屏幕尺寸内进行匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 让div在移动端适配 */
        div{
            width: 3.125rem;
            height: 3.125rem;
            background: gold;
        }
        @media all and (max-width:320px){
            html{
                font-size: 12px;
            }
        }
        @media all and (min-width:321px) and (max-width:375px){
            html{
                font-size: 14px;
            }
        }
        @media all and (min-width:376px) and (max-width:414px){
            html{
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4、vm+rem

vm ：相对于视口单位 100vm=100%宽度，即1vm等于当前浏览器窗口的1%。

注意：100%宽度不包含滚动条。

1、常见的设计图宽度为640px dpr=2

        640px/2 = 320px

        320px = 100vw

        1vw = 3.2px

        1px = 0.3125vw

2、常见的设计图宽度为750px dpr=2

        750px/2 = 375px

        375px = 100vw

        1vw = 3..75px

        1px = 0.2667vw

计算公式

        当设计图宽度为640px 每一份乘以0.3125vw

        当设计图宽度为750px 每一份乘以0.2667vw

        当设计图宽度为640px html{font-size:0.3125vw}

        当设计图宽度为750px html{font-size:0.2667vw}

        因此像素 / dpr = 目标vw