移动web开发流式布局总结

移动web开发流式布局

一，视口

   视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为:

• 布局视口
• 视觉视口
• 理想视口

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

二，meta标签

为了将布局的宽度与手机屏幕宽度保持一致，我们引入了meta标签，结合下面语义进行理解：

最标准的viewport设置

• 视口宽度和设备保持一致
• 不允许用户自行缩放
• 视口的默认缩放比例1.0
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

三，二倍图

1.物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是 750* 1334，也就是我们所说的分辨率为750*1344，那么一行可以放750个像素点。

• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

• 各个手机的开发尺寸，以及物理像素比，如下图：

• 
  Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

2，背景缩放background-size

background-size: 背景图片宽度 背景图片高度;

单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（等比例拉伸，完全覆盖，会有一边超出）

contain把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域。（等比例拉伸，任意一边先与盒子重合即可）

四， 移动开发选择和技术解决方案

1.单独制作移动端页面（主流）

• 通常情况下，网址域名前面加 m(mobile)可以打开移动端。
• 通过判断设备，如果是移动设备打开，则跳到移动端页面。
• 也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站

2.响应式页面兼容移动端（其次）

响应式网站：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配

缺点：制作麻烦， 需要花很大精力去调兼容性问题

3. 移动端大量使用 CSS3盒子模型box-sizing

• 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
• CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
• 也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了，可以在移动端放心去使用。

4.移动端特殊样式

5. 移动端常见布局

1. 移动端单独制作

• 流式布局（百分比布局），也就是说把原来宽度的具体数值改为现在的百分比。
• flex 弹性布局（强烈推荐）
• less+rem+媒体查询布局
• 混合布局

2. 响应式

• 媒体查询
• bootstarp