vw布局
vw单位
viewport’width 的简写
相对于视口宽度的的相对单位
100vw = 视口宽度
1.直接使用vw单位布局
-
以设计稿为基准,使用px进行布局
-
将px转换为vw单位
-
100vw = 视口宽度 = 设计稿的宽度 750 1vw = 7.5px
-
px to vw
-
在设置中,定好视口宽度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Spn0CKFG-1606552592937)(…/AppData/Roaming/Typora/typora-user-images/image-20201124092137031.png)]
-
-
插件使用:
- ctrl+a全选 ——》命令面板(ctrl+shift+p) —》px to vw
2.rem+vw单位布局
- 以设计稿为基准值,预设1rem = 100px,
- 将设计稿中的px值转换为rem进行布局(200px * 200px–>2rem * 2rem)
- 换算 html{font-size: 13.33333vw}
- 1rem = 100px
- 100vw = 视口宽度 = 750px ==> 1vw = 7.5px
- 100px = ? vw
- 1rem = 100px = 13.33333vw
自动添加浏览器前缀
Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。
根据配置Autoprefixer计算哪些前缀是需要的,哪些是已经过期的,添加也可清除过期的前缀;
配置参例
"autoprefixer.browsers": [
"last 3 versions",
"ie >= 10",
"ie_mob >= 10",
"ff >= 30",
"chrome >= 34",
"safari >= 6",
"ios >= 6",
"android >= 4.4"
]
浏览器列表browserslist
手淘布局方案(了解)
lib-flexible是什么?
阿里手机淘宝团队-H5适配的开源库
使用步骤
-
添加对应的
flexible_css.js,flexible.js
文件:<script src="build/flexible_css.debug.js"></script> <script src="build/flexible.debug.js"></script>
-
把视觉稿中的
px
转换成rem-
目前Flexible会将视觉稿分成100份,而每一份被称为一个单位
a
。 -
同时
1rem
单位被认定为10a
。针对我们这份视觉稿可以计算出:
100a = 750 1a = 7.5px 1rem = 10a = 75px
转换过程: 750*750px = 10rem* 10rem
-
实质(做了什么)
- 动态改写
<meta name="viewport">
标签 - 给
<html>
元素添加data-dpr
属性,并且动态改写data-dpr
的值 - 给
<html>
元素添加font-size
属性,并且动态改写font-size
的值
三种像素(掌握)
设备像素 - 物理像素(真实像素)
它是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。
它表示【显示设备的真实像素】,此像素【是设备的固有属性】,也就是说,【从出厂的那一刻,设备像素已经固定,不会再发生改变】
设备独立像素(逻辑像素、虚拟像素)
设备独立像素,可以认为是计算机坐标系统中的一个点,这个点【代表一个可以由程序使用的虚拟像素】(比如说css像素),然后【由相关系统转换为物理像素】
CSS像素
CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。
一般情况之下,CSS像素称为与设备无关的像素
设备像素比(device pixel ratio)——dpr
它定义了物理像素和设备独立像素的对应关系。
设备像素比 = 物理像素 / 设备独立像素(css像素)
dpr=1 代表了1个设备独立像素 对应 1个物理像素
dpr=2 代表1个设备独立像素 对应 4个物理像素
Retina屏(视网膜显示屏)
在不同屏幕上,css所呈现的物理尺寸一致的,不同的是1个css像素所对应的物理像素数是不一致的,
在普通屏幕下1个css像素对应一个物理像素,而在retina屏幕下,1个css对应的是4个物理像素
所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。
一致的,不同的是1个css像素所对应的物理像素数是不一致的,
在普通屏幕下1个css像素对应一个物理像素,而在retina屏幕下,1个css对应的是4个物理像素
所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。