1.视口 viewport
设备宽：如手机，ipad的宽度
页面宽：开发写的页面宽带
视口宽：浏览器自身的一个属性，就是眼睛可看到的区域
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
将这个meta标签添加到head里，代表视距宽等于设备宽，如果页面的宽度很大，就会出现滚动条
如果不写width=设备宽 ，则浏览器默认的视口宽是980。
通俗的说，就是告诉浏览器我们要按多大的宽度渲染页面。
苹果手机我们需要的素材比看到耳朵尺寸大一倍。
安卓是1倍的 所以我们在开发的过程中就需要准备多套素材
为了减少麻烦，我们要使用大尺寸的图片
