移动web学习笔记

移动web viewport设置

1. 流式布局 ：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局；

2. 视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的；
   承载关系：浏览器---->viewport---->网页；

3. 标准移动端适配方案 ：（1）网页宽度必须和浏览器保持一致；（2）默认显示的缩放比例和PC端保持（缩放比例1.0）；
   （3）不允许用户自行缩放网页。

4. viewport参数 ：
   1. width 可以设置宽度 (device-width 当前设备的宽度)
   2. height 可以设置高度
   3. initial-scale 可以设置默认的缩放比例
   4. user-scalable 可以设置是否允许用户自行缩放
   5. maximum-scale 可以设置最大缩放比例
   6. minimum-scale 可以设置最小缩放比例
   在 meta name=“viewport” content="" > content="" 使用以上参数
   7. width=device-width 宽度一致比例是1.0
   8. initial-scale=1.0 宽度一致比例是1.0
   9. user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
   10.标准的适配方案：meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=0”

5. 移动开发使用H5的api或zepto.js的库（内容小、功能齐全，不支持IE，移动端没有IE）；

6. 移动布局公共样式：

   					 /*=======reset css========*/
   					*,
   					*::before,
   					*::after{
   					    /*所有的标签，和伪元素都选中*/
   					    margin: 0;
   					    padding: 0;
   					    /*移动端常用布局是非固定像素*/
   					    box-sizing: border-box;
   					    -webkit-box-sizing: border-box;
   					    /*点击高亮效果的清除*/
   					    tap-highlight-color: transparent;
   					    -webkit-tap-highlight-color: transparent;
   					}
   
   					body{
   					    font-size: 14px;
   					    font-family: "Microsoft YaHei",sans-serif;
   					    color: #333;
   					}
   					ul,ol{
   					    list-style: none;
   					}
   					a{
   					    text-decoration: none;
   					    color: #333;
   					}
   					input,textarea{
   					    border: none;
   					    outline: none;
   					    /*不允许改变textarea尺寸*/
   					    resize: none;
   					    /*移动端 元素的外观  none没有任何样式*/
   					    -webkit-appearance: none;
   					}