前言
大四应届生,已经签好工作了,准备七月份入职,细细算来学习前端已经一年有余,感觉日子真是不经过啊。现在趁着大四最后一点时光,重新将之前学过的基础知识捡起来,为入职做准备,也希望给刚入行的新人带来一些启发。
一、vw和vh
1.1 移动端布局
移动端布局 --- flex 布局
为了实现可以适配移动端,页面元素可以宽度和高度等比例缩放
需要移动端适配有如下方案:
(1)rem
市场比较常见:
- 需要不断修改 html 文字大小
- 需要媒体查询 media
- 需要 flexible.js
(2)vw / vh
未来的趋势:
- 省去各种判断和修改
- 代表: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 呢?
分析:
-
设计稿参照 iPhone 6/7/8,所以视口宽度尺寸是 375px
-
那么 1vw 是多少像素?
375px / 100 = 3.75px
-
我们元素的目标是多少像素?
50px * 50px
-
那么 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 插件
记得进行设置:
打开 px2vw 插件主页、点击设置按钮、点击扩展设置。
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 不同的设备上,所需要的物理像素个数是不同的:
三、拓展
3.1 HTML全局属性 data-*
使用
data-*
属性可以嵌入自定义数据, 它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力, 存储的(自定义)数据能够被页面的 JavaScript 利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:data-
与字符串
- 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
- 该名称不能以
xml
开头 - 属性值可以是任意字符串
- 该名称不能包含任何分号
注意:用户代理会完全忽略前缀为 "data-" 的自定义属性。
作用 :
- data设置的属性值可以在
JavaScript
的DOM
操作中通过dataset
获取到 - 通常用于
HTML
与JavaScript
数据之间传递
<!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>
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>