视口(viewport)浏览器显示页面内容的屏幕区域,视口可以分为布局视口,视觉视口和理想视口 布局视口(layout viewport)
视觉视口(visual viewport)
** 理想视口 (ideal viewport)**
viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no ,initial-scale=1,maximum-scale=1,minimum-scale=1">
物理像素&物理像素比
如下例 定义一个300*300的盒子 在pc显示正常1px=1物理像素
div{
width: 300px;
height: 300px;
background-color: red;
}
手机端的时候是这样的iphoone8的分辨率是(1334*750) 而一个300x300的盒子却快把手机屏幕占满了,这也验证了在移动web开发 1px!=1物理像素,1px或者等于1.几物理像素,或者等于2物理像素或者更多。
由于1px不等于1物理像素,如果在手机上显示一张50px*50px的图片,按照上面的情况,物理像素会放大倍数,这样会造成图片的模糊
如何解决这种情况?、 在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备图片模糊的问题,通常使用2倍图也就是 我们准备的图片比我们实际需要大小的2倍,在利用css将图片缩小成原来的大小,经过移动端展示后图片会被放大,但此时不会模糊,因为图片之前就是移动端放大后的大小
img{
width:50px;
height:50px;
}
...
<img src="test100_100,jpg">
二倍精灵图
css初始化
normalize.css github