移动WEB开发的几种布局

移动布局之流式布局

兼容移动端主流浏览器，处理Webkit内核浏览器就可以了
视口：
1、布局视口：元素看上去小，默认通过手动缩放网页
2、视觉视口：用户看见的网站区域
3、理想视口：设备有多宽，我们布局的视口就多宽（手动添写meta视口标签通知浏览器操作）
想要理想视口，我们需要给移动端页面添加meta标签
meta视口标签

二倍图： 物理像素（分辨率）&物理像素比 在pc端一个物理像素就是1px，但是在移动端是不同的 在移动端里面一个物理像素和1px像素显示的不是一个一一对应的关系。 物理像素比：一个px的能显示的物理像素的个数 物理像素点越多看的越清楚（Retina视网膜屏幕） 2倍图：我们准备的图片比实际需要的大小大2倍，然后根据实际情况设置它的大小，这样放在手机上面才不会变得模糊。 背景缩放background-size属性规定屏幕图像的大小 background-size:图片的宽度 图片的高度; 1、只写一个参数肯定是宽度 高度省略了 但是高度会等比例缩放 2、里面的单位可以跟百分比，这个百分比相当于父盒子来说的。 3、要完全覆盖我们的div盒子，可能有部分背景图片显示不全。background-size:cover; cover把背景图像扩展到足够大，等比例拉伸。 4、contain 高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了。可能有部分空白区域。 切图片插件：cutterman 移动端技术解决方案： 1、非常支持H5和css3样式 2、css初始化推荐使用normalize.css/ 下载 npm install normalize.css 官网地址：http://necolas