✍2019-06-14 关于单位

大纲

• px 和 视口
• 媒体查询
• 百分比
• 自适应场景下的 rem 解决方案
• 通过 vw/vh 实现自适应

一、px 与 视口

通常使用 px 作为单位，来确定一个元素的宽高，在表面上看来 1px 是固定的单位，其实不然, px 也是一个相对的单位

1. 像素

=> 像素分为 css像素 和 物理像素

• css像素：为web开发者提供，在css中使用的一个抽象的单位
• 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的

2. 视口

=>广义：浏览器显示内容的屏幕区域

=> 狭义：布局视口、视觉视口、理想视口

I.布局视口

定义了 pc 网页的在移动端的默认布局行为，布局视口默认为980px

II.视觉视口

指浏览器内看到的网站显示的区域，用户可以通过缩放来查看网页的显示内容。类似一放大镜中显示内容，所有布局是视口不会影响

III.理想视口（理想的布局视口，在移动设备上指分辨率）

总结的说是，给定设备的物理像素的情况下，最佳的布局视口

理解分辨率与物理像素的之间的关系

DPR(设备像素比) = 物理像素/分辨率

在不缩放的情况下：1px = 1DPR

PS：前几天写个项目出现了一个问题！在pc端调好的代码，放在手机上会放大显示，并且px的量很奇怪，很大，之后参考了网上的解决方法，在代码中添加了一串代码

当时没有仔细去想，改好了代码就直接忘了，看到别人的文章突然想起来了

image.png

3.px与自适应

二、媒介查询

使用 @media媒体查询，对于不同的媒体类型定义不同的类型
==>缺点是繁琐

三、百分比

• height 与 width
  像对于子元素的直接父元素
• top、bottom、left、right
  top、bottom 相对于直接非static定位的父元素高度
  left、rigth相当于直接非static定位的父元素的宽度
• padding
  不论是垂直方向,还是水平方向上，都是直接父元素的width
• margin
  不论是垂直方向上，还是水平方向上，都是直接父元素的width
• border-radius
  相对于自身的宽度
  -translate 、background-size
  相对于自身的宽度
  缺点:
• 计算困难
• 使用百分比布局是问题变得复杂

四、rem

是一个相对单位，相对于html根元素
默认情况下,font-size :16px=> 1rem=16px

五、vh、 vw

与视口有关，vw视口宽、vh视口的高、vmin两者中较小的那个、vmax两者中较大的那个
首先、视窗的宽高是100vw、100vh，但与百分比的形式有差异，vh\vw至相对于视窗