一、px与视口
1.像素:一个像素表示了计算机屏幕所能显示的最小区域,分为css像素(css中使用的一个抽象单位)和物理像素(只与设备的硬件密度有关)
2.视口--理想视口(理想的布局视口、在移动设备中指设备的分辨率===>给定设备物理像素的情况下,最佳的布局视口)1css 像素 = 物理像素/分辨率
在meta标签中会将width设置为decive-width,即将布局视口设置成了理想的视口
当屏幕大小改变时,更新当前的宽度
3.px与自适用
通常pc端的布局视口是980px,移动端iphone6是375,现在有一个750px*1134px的视觉稿,那么有:
pc:1 css 像素 = 750/980 = 0.76px; iphpne6:1css = 750/375=2px
因此如果只在css中通过px作为长度和宽度的话,就会使得结果无法通过一套样式实现各端的自适应。
二、媒体查询
使用@media媒体查询可以针对不同的媒体类型定义不同的样式,尤其是响应式页面,可以针对不同屏幕的大小编写多套样式,从而达到自适用的效果。
缺点是:浏览器的大小改变时,需要改变的样式太多,多套代码会繁琐。
三、百分比
除了用px结合媒体查询实现响应式布局外,也可以使用百分比单位%来实现响应式的效果。
1、百分比的具体分析
子元素的height和width使用的百分比是相对于子元素的直接父元素;
子元素的top和bottom使用的百分比是相对于直接非static定位父元素的height;
子元素的left和right使用的百分比是相对于直接非static定位父元素的width;
子元素的padding和margin使用的百分水平方向与垂直方向都是相对于直接父元素的width;
例如实现一个长宽为4:3的长方形
用较多的百分比的缺点:计算困难,使布局变得复杂。
四、自适应场景下的rem解决方案
1.rem单位是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同的是rem单位无论嵌套层级如果,都只是相对于浏览器的根元素(HTML元素)的font-size。默认情况下,html元素的font-size为16px,即1rem = 16px
html{font-size:62.5%} 1rem = 16 *0.625 = 10px
2.通过rem来实现响应式布局
rem单位是相对于根元素html的font-size来决定大小的,即根元素的font-size提供了一个基准,当页面的size发生改变时,只需要改变font-size的值,那么以rem固定单位的元素的大小也会发生响应的变化。即通过rem来实现响应式的布局,只需要根据视图容器的大小,动态改变font-size即可。
如果我们要将所有的布局单位都用rem表示,高效的方法是在css中我们还是用px来表示元素的大小,最后编写完css代码之后,将css文件的所有px单位,转化为rem单位。使用px2rem,预处理以px为单位的css文件,处理后将所有的px变成rem单位,可以通过webpack loader的形式和webpack中使用postcss plugin来实现。
五、通过vw/vh来实现自适应
任意层级元素,在使用vw单位的情况下,1vw都等于视图宽度的百分之一。