# 1.前端常用单位
# 1. 常用单位-px
像素：
- 在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
- 不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)
例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格
.div {
width:100px;
height:100px;
}
# 2.常用单位-%
- 百分比是开发中得一种动态单位，永远都是以当前元素得父元素做为参考计算(会随着父元素的宽高变化而变化)
例如: 父元素得宽高是200px,子元素宽高设置50%,子元素宽高为100px。
.father {
width: 400px;
height: 600px;
background: #ccc;
opacity: 0.5;
}
/* 子元素宽高为父元素宽高的50%*/
/* .son {
width: 50%;
height: 50%;
background-color: blueviolet;
} */
/*子元素的padding为父元素宽度的百分比 -- 参照父元素的宽度*/
/* .son {
width: 50%;
height: 50%;
background-color: blueviolet;
padding: 10% 10%;
} */
/* 子元素的margin为父元素宽度的百分之 -- 参数父元素的宽度 */
/* .son {
width: 50%;
height: 50%;
background-color: blueviolet;
margin: 10% 10%;
} */
总结：
- 子元素的宽度参照父元素的宽度计算
- 子元素的高度参数父元素的高度计算
- 子元素的margin水平垂直参照父元素的宽度计算
- 子元素的padding水平垂直参照父元素的宽度计算
# 3.常用单位-em
- em是一种动态单位，是相对于元素字体大小的单位(会随着参考元素字体大小变化而变化)
例如：font-size:12px; 那么 1em 就等于 12px, .5em 就等于 6px
总结：
- 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
- 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
- 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小
# 4.常用单位-rem
- rem就是root em,相对于根元素的字体大小,是一个动态单位(会随着根元素字体大小的变化而变化)。
例如 根元素(html) font-size: 12px; ,那么1em就等于12px
rem和em的区别在于：
- rem是一个相对于根元素字体大小的单位,em是相对于当前元素字体或者父级元素字体
总结:
- 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
- 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
- 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小
# 5.常用单位-vh-vw
- vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位(会随着视口大小的变化而变化)
- 系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
- vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考,而vw和vh永远都是以视口作为参考
vmin和vmax
- vmin: vw和vh中较小的那个
- vmax: vw和vh中较大的那个
使用场景: 保证移动开发中屏幕旋转之后尺寸不变
可以到浏览器中切换横屏和竖屏的时候尺寸不变。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 10vmin;
height: 10vmax;
background: red;
}
</style>
</head>
<body>
<div></div>
<script>
console.log(window.innerWidth, window.innerHeight);
let oDiv = document.querySelector("div");
console.log(getComputedStyle(oDiv).width);
console.log(getComputedStyle(oDiv).height);
</script>
</body>
</html>
# 2.前端视口
- 视口简单理解就是可视区域大小我们称之为视口
- 在PC端，视口大小就是浏览器窗口可视区域的大小
- 在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980
虽然移动端自动将视口宽度设置为980之后让我们可以很完美的看到整个网页 但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的 所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小
设置:
如何保证在移动端不自动缩放网页的尺寸?
通过meta设置视口大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例, 1不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放
-->
# 3.设备像素和逻辑像素
设备像素又称为物理像素, 是"物理屏幕"上真实存在的发光点，屏幕一经出厂就固定不会改变的。
CSS像素又称为逻辑像素，是编程世界中虚拟的东西, 我们通过代码设置的像素都是逻辑像素。
在PC端，1个CSS像素往往都是对应着电脑屏幕的1个物理像素,所以我们无需关心PC端的CSS像素和设备像素,但是在移动端，则不一定
- 在移动端CSS像素和设备像素在有的时候是不一样的。
举例说明：
```
iPhone3G/iPhone3GS 3.5英寸/ 逻辑像素320*480 / 设备像素320*480
iPhone4/4S 3.5英寸/ 逻辑像素320*480 / 设备像素640*960
```
解释：
retina屏
从iPhone4开始，苹果公司推出了所谓的retina视网膜屏幕。
iPhone4的屏幕尺寸却没有变化，但是像素点却多了一倍，这就导致了在1个CSS个像素等于1个物理像素的手机上, 我们设置1个CSS像素只会占用1个物理像素，而在1个CSS个像素不等于1个物理像素的手机上, 我们设置1个CSS像素就会占用2个物理像素。所以仔细观察你会发现同样是1像素但是在retina视网膜屏幕的手机上会粗一些。从而引出了常见的1px边框的解决方案。
如何解决设备像素和CSS像素不一样的问题?
- 如果设备像素和CSS像素一样, 那么无需处理不会带来任何负面影响
- 如果设备像素是CSS像素的2倍, 那么我们只需将CSS像素缩小一半即可
- 但是有时候设备像素可能是CSS像素的3倍/4倍...
解决
- 获取设备像素比 （Device Pixel Ratio）
- 进行缩放
<meta name="viewport"> - 设置
设备像素比DPR(Device Pixel Ratio)
DPR = 设备像素 / CSS像素
iPhone3GS : 320 / 320 = 1 iPhone4S: 640 / 320 = 2 iPhone678: 750 / 375 = 2 iPhoneX: 1125 / 375 = 3
通过计算 DPR 我们能够知道需要缩放的倍数来进行适配。
获取DPR
window.devicePixelRatio
缩小
console.log(1.0 / window.devicePixelRatio);
通过
的initial-scale属性来缩小注意点: 缩放视口后视口大小会发生变化
// console.log(1.0 / window.devicePixelRatio); // 1 / 1 = 1; 1 / 2 = 0.5;
let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
设置
document.write(text);