IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....PC端页面,1px等于1个物理像素点,但是移动端就不尽相同.
一个px点能显示的物理像素点的个数,称为物理像素比或者屏幕像素比....不同设备的不同像素比:
PC端和早前的手机屏幕/普通手机屏幕:1CSS像素=1物理像素
Retina(视网膜屏幕)概念,可以把更多的物理像素点压缩在一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度...对于一张50px*50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊.
在标准的viewport中,使用倍图来提高图片质量,解决在高清设备中的模糊问题....背景缩放 background-size
语法:
background-size: 宽度 高度;
假如有两个值,那么就是直接拉大或缩小图片,如果是只有一个值,那就必然是宽度,高度默认不变,所以是按照宽度等比例缩放