大纲
- 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的量很奇怪，很大，之后参考了网上的解决方法，在代码<head>中添加了一串代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
当时没有仔细去想，改好了代码就直接忘了，看到别人的文章突然想起来了
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至相对于视窗
网友评论