viewport和移动端布局
前端开发中,响应式布局通常需要适应不同分辨率的设备
常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh
1.px和视口
在静态页面中我们经常使用像素(px)作为单位,来描述一个元素的宽高以及定位信息
在pc端,通常认为1px表示的真实长度是固定的
但是在不同的设备上,px的大小显示结果肯定会不一致,移动端显示较小
那么css中的1px的真实长度到底由什么决定
1.像素
像素是网页布局的基础,一个像素表示了计算机屏幕所显示的最小区域
像素分为两种:css像素和物理像素
1.css像素:web开发者提供,css中使用的一个抽象单位
2.物理像素:只与设备的硬件密度有关,任何设备的物理像素都是固定的
2.视口
广义视口,浏览器显示内容的屏幕区域.狭义视口:
1.布局视口
布局视口定义了pc网页在移动端的默认布局行为,因为pc分辨率较大
布局视口默认是980px,也就是说在不设置网页的视口的情况下
pc端的网页默认以布局视口为基准,在移动端进行展示
所以默认为布局视口的时候,根植于pc的网页,在移动端显示的很模糊
2.视觉视口
视觉视口表示浏览器内看到的网站显示区域,用户可以通过缩放来查看网页
显示内容,从而改变视觉视口,就像拿一个放大镜分别从不同距离观察同一
个物体,因此视觉视口不会影响布局视口的宽度和高度
3.理想视口
理想的布局视口,在移动设备中就是指设备的分辨率
就是给定设备物理像素的情况下,最佳的"布局视口"
为了理清分辨率和物理像素之间的关系
1 设备像素比(DPR) = 物理像素/分辨率
在不缩放的情况下:
1 CSS像素 = 物理像素/分辨率
在移动端的布局中,我们可以通过viewport元标签来控制布局
width:定义布局视口的宽度,单位为像素
height:定义布局视口的高度,单位为像素
initial-scale:初始缩放比例,1表示不缩放
minimum-scale:最小缩放比例
maximum-scale:最大2缩放比例
user-scalable:是否允许手动缩放页面
在移动端布局,在meta标签中将width设置为device-width
这样就将布局视口设置为理想的视口
3.px与自适应
设置布局视口为理想视口
1 CSS像素 = 物理像素/分辨率
pc的布局视口通常为980px,iphone6是375667,也就是布局视口在理想情况下式375px
比如现在有一个750px1134px的视觉稿
pc: 1 CSS像素 = 750/980 = 0.76px
iphone6: 1 CSS像素 = 750/375 = 2px
也就是说在pc端,一个CSS像素可以用0.76个物理像素来表示
而在iphone端,一个CSS像素表示了2个物理像素
因此在css中通过px作为长度和宽度的单位,是无法实现各端的自适应
2.媒体查询
给每一种设备分别设置一套样式
使用@media媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面
可以针对不同屏幕的大小编写多套样式,从而达到自适应
缺点:浏览器大小改变的时候,需要改变的样式太多,繁琐
3.百分比
当浏览器的宽高发生改变的时候,通过百分比,让组件的宽高随浏览器的变化而变化,实现响应式
CSS子元素中的百分比到底是谁的百分比
1.分析
1.子元素height/width的百分比
相对于直接父元素
2.top/bottom/left/right
相对于直接非static定位的父元素
3.padding/margin
无论垂直还是水平,相对于直接父元素的width,与height无关
4.border-radius
相对于自身的width
2.缺点
1.计算困难,需要换算成百分比单位
2.都使用百分比,相对父元素不是唯一的
4.rem
1.rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示
rem无论嵌套层级如何,都只相对浏览器的根元素的font-size
2.当页面size发生变化,只需要改变font-size的值,那么以rem为固定
单位的元素的大小也会发生变化
3.rem2px和px2rem
1.rem2px表示从rem转为px
2.px2rem表示从px转为rem
1.一个一个转为rem
2.还是用px来表示,最后将所有px转化为rem
1.重点在于预处理以px为单位的css文件
1.webpack loader
引入一个px2rem-loader
2.webpack中使用postcss plugin
4.缺点
必须通过JS来动态控制根元素的font-size
也就是css样式和js代码有一定的耦合性,且必须将修改font-size样式的代码放在css样式之前
5.vw/vh
1.CSS3引入了一个新的单位vw/vh,与视图窗口有关
vw表示相对于视图窗口的宽度,视图宽度为100vw
vh表示相对于视图窗口的高度,视图高度为100vh
%:相对于祖先,相对于自己
vw/vh:相对于视窗的尺寸
2.vw单位换算
确定视图的窗口大小,比如iphone6的375*667分辨率
1px = (1/375) * 100 vw
也可以通过postcss-px-to-viewport插件
3.兼容性
ie9-11不支持vmin/vmax
opera不支持vw单位
