移动端布局(下)

233 阅读5分钟

前言

大四应届生,已经签好工作了,准备七月份入职,细细算来学习前端已经一年有余,感觉日子真是不经过啊。现在趁着大四最后一点时光,重新将之前学过的基础知识捡起来,为入职做准备,也希望给刚入行的新人带来一些启发。

一、vw和vh

1.1 移动端布局

移动端布局 --- flex 布局

为了实现可以适配移动端,页面元素可以宽度和高度等比例缩放

需要移动端适配有如下方案:

(1)rem

市场比较常见:

  1. 需要不断修改 html 文字大小
  2. 需要媒体查询 media
  3. 需要 flexible.js

(2)vw / vh

未来的趋势:

  1. 省去各种判断和修改
  2. 代表:bilibili、小米……

1.2 vw/vh是什么?

  • vw/vh 是一个相对单位(类似 em 和 rem 相对单位)

    • vw 是:viewport width 视口宽度单位
    • vh 是:viewport height 视口高度单位
  • 相对视口的尺寸计算结果

    • 1vw = 1/100 视口宽度
    • 1vh = 1/100 视口高度

例如:

当前屏幕视口是 375px,则 1vw 就是 3.75px,如果当前屏幕视口为 414px,则 1vw 就是 4.14px。

注意:和百分比有区别,百分比是相对于父元素来说的,而 vw 和 vh 总是针对于当前视口来说的。

1.3 vw/vh怎么用?

  • 超级简单,元素单位直接使用新单位 vw/vh 即可
  • 因为 vw/vh 是相对单位,所以不同视口(屏幕)下,宽高一起变化完成适配

直接使用即可!永远滴神!

【案例】

div {
    width: 10vw;
    height: 10vh;
    background-color: pink;
}

如何还原设计稿?

前提:我们设计稿按照 iPhone 6/7/8 来设计,有个盒子是 50px * 50px 的,如何使用 vw 呢?

分析:

  1. 设计稿参照 iPhone 6/7/8,所以视口宽度尺寸是 375px

  2. 那么 1vw 是多少像素?

    375px / 100 = 3.75px

  3. 我们元素的目标是多少像素?

    50px * 50px

  4. 那么 50 * 50 是多少个 vw?

    50 / 3.75 = 13.3333vw

在像素大厨等 UI 软件中,直接选择 vw 单位然后测量即可,不用人工计算。

1.4 vw注意事项

  • 因为涉及到大量除法且有除不尽的情况,所以还是适应 LESS 搭配更好点

  • 我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的,所以开发中使用 vw 就基本够用了。vh 很少使用(高度变化时,我们一般不需要元素大小进行变化,所以用不到 vh)

    div {
        /* 都用vm */
        width: 13.333333vw;
        height: 12.666666vw;
        font-size: 5.333333vw;
        background-color: pink;
    }
    
  • 兼容性,网站:caniuse.com/

目前适用于移动端,PC 端不适用。

1.5 VSCode px->vw 插件

415a42d4c6244380b0bb6565c5467514.png

记得进行设置:

打开 px2vw 插件主页、点击设置按钮、点击扩展设置。

f736d42ebcae42fd8aaf845841dcdbed.png

1.6 移动端布局推荐

flex + less + vw YYDS!

二、移动端视口

2.1 css中的单位

css中的单位整体可以分为两类:

  • 绝对长度单位
  • 相对长度单位

绝对长度单位 :

  • 它们与其他任何东西都没有关系, 通常被认为总是相同的大小
  • 这些值大多数用在打印/实物时比用于屏幕输出时更有用,如厘米/毫米/英寸
  • 唯一一个您常用的值 -- px

相对长度单位 :

  • 相对长度单位一般会相对于其他的一些东西
  • 比如父元素字体大小, 或者试图端口大小
  • 常见的相对长度单位 -- em/rem/vw/vh

2.2 常见的像素单位

像素单位常见的有三种像素名称:

  • 设备像素(也被称为物理像素)
  • 设备独立像素(也被称为逻辑像素)
  • css像素

设备像素(也被称为物理像素) :

  • 指的是显示器上的真实像素, 像素大小是屏幕固有的属性 屏幕出厂以后就不会改变了
  • 在购买显示器和手机的时候, 提到的设备分辨率就是设备像素的大小
  • 比如iphone x的分辨率 1125 x 2436, 指的就是设备像素

设备独立像素(也被称为逻辑像素) :

  • 抽象的概念, 可以在电脑的显示设置里自行设置分辨率
  • 面向开发者的像素

css像素 :

  • 默认情况下等同于设备独立像素
  • 在 CSS 中经常写的 px 就是指逻辑像素,它和物理像素并不一定是一一对应的,物理像素和逻辑像素之间的对应关系会有 DPR 决定。

2.3 DPR

DPR(device pixel ratio)即设备像素比,定义了物理像素和逻辑像素之间的关系。

DPR = 物理像素/逻辑像素

当 DPR 为 1 时,屏幕上的一个逻辑像素需要 1*1 物理像素来渲染,当 DPR 为 2 时,屏幕上的一个逻辑像素需要 2*2 个物理像素来渲染,以此类推,DPR 越大需要的物理像素越多,同时画面显示就会越清晰和细腻。

如下图示例,我们显示一个 width: 2px; height: 1px; 的色块,在 DPR 不同的设备上,所需要的物理像素个数是不同的:

b2d0a2de2d624746bb725a381f4dec7b_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

三、拓展

3.1 HTML全局属性 data-*

使用 data-* 属性可以嵌入自定义数据, 它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力, 存储的(自定义)数据能够被页面的 JavaScript 利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:data-字符串

  • 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
  • 该名称不能以xml开头
  • 属性值可以是任意字符串
  • 该名称不能包含任何分号

注意:用户代理会完全忽略前缀为 "data-" 的自定义属性。

作用 :

  • data设置的属性值可以在JavaScriptDOM操作中通过dataset获取到
  • 通常用于HTMLJavaScript数据之间传递
<!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></title>
    <style></style>
  </head>

  <body>
    <div class="box" data-name="zgc" data-age="22"></div>

    <script>
      // 获取到 .box 的元素
      const box = document.querySelector(".box");
      console.log(box);
      // 获取到定义的数据
      console.log(box.dataset); // {name: 'zgc', age: '22'}
    </script>
  </body>
</html>

image.png

3.2 white-space

white-space用于设置 空白处理换行规则

<!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></title>
    <style>
      div {
        margin: 10px 0;
        width: 200px;
        background-color: #ccc;
      }

      .box0 {
        /* 默认值, 浏览器默认进行处理 : 允许合并所有连续的空白, 允许单词在超过宽度时自动换行*/
        white-space: normal;
      }

      .box1 {
        /*  允许合并所有连续的空白, 不允许单词在超过宽度时自动换行  */
        white-space: nowrap;
      }

      .box2 {
        /* 不允许合并所有连续的空白, 不允许单词在超过宽度时自动换行 */
        /* 空白: tab/空格/换行符 */
        white-space: pre;
      }

      .box3 {
        /* 不允许合并所有连续的空白, 允许单词在超过宽度时自动换行 */
        /* 空白: tab/空格/换行符 */
        white-space: pre-wrap;
      }

      .box4 {
        /* 允许合并所有连续的空白(但保留换行符), 允许单词在超过宽度时自动换行 */
        /* 空白: tab/空格/换行符 */
        white-space: pre-line;
      }
    </style>
  </head>

  <body>
    <div class="box0">
      我是zgc 哈哈哈   wwwwwww 
      呵呵呵     嘿嘿嘿
    </div>
    <div class="box1">我是zgc 哈哈哈   wwwwwww 
      呵呵呵     嘿嘿嘿
    </div>
    <div class="box2">我是zgc 哈哈哈   wwwwwww 
      呵呵呵     嘿嘿嘿
      <!-- 这里换行是因为有换行符 -->
    </div>
    <div class="box3">我是zgc 哈哈哈   wwwwwww 
      呵呵呵     嘿嘿嘿
    </div>
    <div class="box4">我是zgc 哈哈哈   wwwwwww 
      呵呵呵     嘿嘿嘿
    </div>
  </body>
</html>

image.png