移动WEB开发流式布局

一.移动端基础

1.常见移动端屏幕尺寸：数据参照Material Design
2.调试方式：利用chrome浏览器模拟手机浏览器进行调试。

二.视口

视口（viewport）是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口。
1.布局视口 layout viewport
（1）一般移动设备的浏览器都默认设置一个布局视口，用于解决早期的PC端页面再手机上显示的问题。
（2）iOS，Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多数都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
2.视觉视口 visual viewport
（1）字面意思：用户正在看到的网站的区域。
（2）可以通过缩放操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度。
3.理想视口 ideal viewport
（1）为了使网站在移动端有最理想的浏览和阅读宽度而设定。
（2）需要手动添加meta视口标签通知浏览器操作。
（3）meat视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局视口就有多宽。
3.1 meta视口标签

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes/no（1/0）

4.标准的viewport设置
（1）视口宽度和设备保持一致
（2）视口的默认缩放比例1.0
（3）不允许用户自行缩放
（4）最大允许缩放比例1.0
（5）最小允许缩放比例1.0

"viewport" content="width=device-width,user-scalable=no,
initial-scale=1.0,maxmum-scale=1.0,minimum-scale=1.0">

三.二倍图

1.物理像素和物理像素比
（1）物理像素点是指屏幕显示的最小颗粒，是物理真实存在的。厂商在出厂时就设置好了，就是分辨率。
（2）开发的时候，PC端页面1px等于1个物理像素点，但是移动端不一定。
（3）一个px能显示的物理像素点的个数称为物理像素比或屏幕像素比。
（4）在标准viewport中，使用倍图来提高图片质量，解决图片模糊问题。实际上图片的像素在移动端会扩大两倍，甚至三四倍。
例如：在实际开发时，要插入5050的图片，那么在开发时就使用100100的图片，再手动设置CSS样式为5050，这样到移动端扩大两倍后是100100，但图片本身就是100*100，所以模糊问题就能解决了。
2.背景缩放 background-size：
（1）图片的宽度 图片的高度；如果只写了一个参数，那就是宽度，高度等比例缩放
（2）百分比%；相对于父盒子来说
（3）cover；等比例拉伸，完全覆盖盒子，但是可能会有部分图片显示不全
（4）contain；高度和宽度等比例缩放，当宽度或者高度铺满盒子时就不再进行拉伸，可能有部分空白区域
3.二倍精灵图的做法
（1）在firework中把精灵图等比例缩放为原来的一半；
（2）根据大小测量坐标；
（3）background-size设置为原来宽度的一半。

四.移动端开发选择

市场上常见的移动端开发有单独制作移动端页面和响应式页面，主流的选择还是单独制作移动端页面，因为响应式的页面需要耗费大量精力去解决兼容性问题。

五.移动端技术解决方案

1.移动端浏览器基本以webkit内核为主，主要考虑webkit的兼容性问题；
2.移动端CSS初始化：[normalize.css(http://necolas.github.io/normalize.css/)
3.特殊CSS样式：
（1）点击高亮需要清除，设置为透明：-webkit-tap-highlight-color:transparent
（2）在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式：-webkit-appearance:none
（3）禁用长安页面时的弹出菜单：-webkit-touch-callout:none

六.移动端开发之流式布局（百分比布局）

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。为了防止无限伸缩，给父亲盒子设置最大最小宽度，max-width和min-width

七.移动端开发之flex布局

1.原理：flex（flexible box）是弹性布局，任何一个容器都可以指定为flex布局。通过给父盒子添加flex属性来控制盒子的位置和排列方式。
注意：当父盒子设置了flex布局后，子元素的float、clear、vertical-align属性都将失效。
2.flex布局父项常见属性
（1）flex-direction：设置主轴的方向
①默认主轴方向就是x轴方向，水平向右；默认侧轴方向是y轴方向，水平向下；
②指定一个主轴，剩下的就是侧轴，子元素跟着主轴的方向来排列

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从上到下

（2）justify-content：设置主轴上的元素排列方式

属性	说明
flex-strat	默认值，从头部开始
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

（3）flex-wrap：设置子元素是否换行。
默认情况下子元素是不换行的，如果装不下，会缩小子元素的宽度，放到父元素中。
（4）align-items：设置侧轴上的子元素排列方式（单行）
该属性可以控制子项在侧轴的排列方式，在子项为单向的时候使用(默认y轴为侧轴)。

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸（不设置高度）

（5）align-content：设置侧轴上的子元素排列方式（多行）
设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有作用的。

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

（6）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
3.flex布局子项常见属性
（1）flex属性：定义子项自分配剩余空间，用flex来表示占了多少份
（2）align-self属性：控制某子项自己在侧轴上的排列方式
（3）order属性：数值越小，排列越靠前

八.rem单位

1.em相对于父元素的字体大小来说，宽高换算为px就是分别为em的值乘以父元素的px值；
2.rem是相对于HTML元素的字体大小来说的。
3.rem可以通过修改html里面文字的大小来修改页面中元素的大小来整体控制。
4.元素大小取值方法：
①页面元素的rem值 = 页面元素值(px)/(屏幕宽度/划分的份数)
②屏幕宽度/划分的份数就是html font-size的大小
③也可以：页面元素的rem值 = 页面元素值(px)/html font-size的字体大小

九.媒体查询（@media）

1.@media可以针对不同的屏幕尺寸设置不同的样式。
2.语法规规范

@media mediatype and|not|only|(media feature){
   CSS-Code;
  }

mediatype媒体类型

值	说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等