1.手机适配协作模式
转载自:https://github.com/amfe/article/issues/17
2.几个基本概念
1.视窗viewport
visual viewport虚拟视窗
layout viewport布局视窗——比虚拟视窗大,可理解为,不改变大小或形状的大图像
2.像素换算
物理像素(physical pixel):物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。
根据下面荧光背景的公式,而且ip6的dpr为2,可以算出ip6的物理像素是:750pt*1334pt
设备独立像素(density-independent pixel):与屏幕密度有关,可以辅助区分视网膜设备(retina)和非视网膜设备:如ip6的宽高:375pt*667pt就是设备独立像素
css像素:CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。
屏幕密度:指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)。
设备像素比(device pixel ratio)(dpr)
设备像素比=物理像素/设备独立像素
JS中用window.devicePixelRatio获取dpr
而在CSS中,可以通过-webkit-device-pixel-ratio
,-webkit-min-device-pixel-ratio
和 -webkit-max-device-pixel-ratio
进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
div height="200" width="300"></div>
上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/towards-retina-web.html © w3cplus.com
<div height="200" width="300"></div>
上面的代码,将会在显示屏设备上绘制一个200x300像素的盒子。但是在Retina屏幕下,相同的div却使用了400x600设备像素,保持相同的物理尺寸显示,导致每个像素点实际上有4倍的普通像素点,如图所示:
出处:http://www.w3cplus.com/css/towards-retina-web.html
在普通屏幕上1css像素对应1个物理像素
而在retina屏幕下(视网膜屏幕),1个css像素对应4个物理像素
而ip6是retina屏幕,所以ip6的物理像素是设备独立像素各乘以2
http://www.w3cplus.com/css/towards-retina-web.html
详解retina屏幕如何解决图片适配问题
3.meta标签
<meta>
标签有很多种,而这里要着重说的是viewport的meta
标签,其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大。在开发移动端页面,我们需要设置meta
标签如下:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。
留个悬念,因为后面的解决方案中需要重度依赖meta
标签
4.CSS单位rem
简单的理解,rem
就是相对于根元素<html>
的font-size
来做计算。而我们的方案中使用rem
单位,是能轻易的根据<html>
的font-size
计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。