前端Day10

视口(viewport)：浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口、理想视口。

布局视口：

 

视觉视口：

 

理想视口：

 

meta视口标签：

width=device-width：布局视口宽度为当前设备宽度*

user-scalable=no：不允许用户缩放

 

二倍图：（准备图片比实际大两倍即为两倍图）

1.物理像素比：

①物理像素：即分辨率，例如iPhone8物理像素为750。

②开发像素：即实际像素px，例如iPhone8中 1px开发像素 = 2个物理像素

 

背景缩放 background-size：

 

移动端问题解决：

流式布局：(百分比布局)

 

二倍精灵图：

 

图片格式：