移动端流动布局

1.流式布局:使用百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,成为流动布局
2.视觉窗口:viewport 是移动端特有的,这是一个虚拟的区域,用于承载网页
    分三类:设备视口,页面视口,理想视口:一种理想的状态,设备视口=页面视口
    承载关系:浏览器-->viewport-->网页
1.适配要求
1)网页的宽度必须和浏览器的宽度保持一致  width='device-width'
2)默认的显示缩放比例和PC端保持一致(缩放比例1.0)   initial-scale=1.0
3)不允许用户进行缩放     user-scalable=0
-----达到以上三点,达到了适配,是国际上通用的适配方案,标准的移动端适配方案
2.适配设置:
视口:在head标签下添加一个<meta name='viewport' content='适配要求'>
viewport的功能
1)width:设置页面宽度   device-width:设置当前设备宽度
2)height:设置页面高度   device-height:设置当前设备高度
3)initial-scale   设置默认的缩放比例  1.0  [0.0-10.0]
4)maximum-scale     设置最大缩放比例
5)minimum-scale     设置最小缩放比例
6)user-scalable         用户是否允许缩放     yes     no     1     0
3.标准的适配: <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
快捷键:meta:vp+tab键
屏幕像素:也叫物理像素,也叫像素点,设备显示屏的最小可视颗粒的大小
非主流适配方案特征:根据设备分辨率的不同,设置缩放比例不同,有2倍,3倍...成本非常高

1.移动端可以使用jquery,但是不建议
2.jquery:做了很多桌面浏览器兼容问题,特别是IE,但是移动端没有IE浏览器
3.移动端主流的浏览器:谷歌,火狐,Safari,qq,百度....
这些浏览器的特点:内核基本上都是webkit或者blink  兼容-webkit-
4.可以使用h5的api,或者使用轻量级的jquery库---zepto.js---用法和jquery用法一样