登录·注册
文章详情
0
移动端rem布局以及viewport详解
目前Web Appp 屏幕适配方法有很多,比如流式布局,限死高度,响应式等方法;我认为rem为最佳的解决方案,它可以以最小的代价适配所有的屏幕
不得不说一下viewport:只有明白了viewport的概念以及meta标签的使用,才能使网页适配。
PPK关于三个viewport(视口)理论
布局视口 默认的viewport:为什么body的宽度是980px?980为移动端的布局视口。        
对于移动设备而言:布局视口 为设备屏幕上用来显示网页的区域,早期浏览器厂商为了让用户在小屏幕下网页也能够显示地很好,所以把布局视口宽度设置地很大。它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,移动设备上的布局视口都是要大于浏览器可视区域的(iphone,ipad,android,chrome均为980px)
视觉视口:物理屏幕的可视区域,同样尺寸的屏幕,像素密度大的设备,物理像素会更多。比如iphone6:750*1334
理想视口:分辨率
dip & 分辨率:移动端的分分辨率就是理想视口,比如MBP的布局视口是:2880 * 1800。当设置屏幕分辨率为 1920 * 1200 的时候,理想视口是1920像素,设备像素比是1.5(2880/1920)。而移动端手机屏幕通常不可以设置分辨率,比如iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x(Retina)
逻辑像素宽度*倍率 = 物理像素宽度;
所以,css中的1px并不等于设备的1px,现在就可以解释为什么移动端css里面写了1px, 实际看起来比1px粗。以iPhone6为例:meta设置了viewport的宽度等于理想视口为375px,新设的viewport能填充满屏幕宽,但它的设置和屏幕物理分辨率750px是不相同的。 此时css里写的1px长度映射到物理像素上就有2px那么长。
现在提供一个常用的解决方案:用小数来写px值,利用window里的devicePixelRatio属性
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

总结:

利用meta标签对viewport进行控制:移动设备默认的viewport是layout viewport,但在进行移动设备网站的开发时,我们需要的是ideal viewport理想视口 375。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
  1. width属性被用来控制布局视口的宽度,width=device-width 也就是将viewport的宽度设置为理想视口的宽度。网页缩放比例为100%时,一个CSS像素就对应一个分辨率像素(iphone6:375px)
  2. initial-scale=1 表示将布局视口的宽度设置为理想视口(分辩率)的宽度
  3. user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes

rem布局

rem是指根元素(root element html)的字体大小,我们知道 em 的计算是基于父级元素的,计算起来复杂很不方便。所以 rem 的出现使得我们不用再担心父级元素的 font-size 了,因为它始终是基于根元素(html)的。
核心思想:根据html(根元素)的 font-size 大小通过媒体查询的方式来调整字号达到适配屏幕
1 首先设置html的font-size:100px;100px方便后面的计算
2 通过媒体查询的方式来调整字号
其他的屏幕也以此类推就好。

结束总结:

  1. 如果不设定 meta viewport,移动设备上的默认宽度就会为750px,1024px等等,实际上市面上的手机分辨率也就320、375、411几种。viewport远大于分辨率宽度。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。