1.视口
视口（viewport）即浏览器显示页面内容的屏幕区域。分为布局视口、视觉视口和理想视口。
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
| 属性 | 解释说明 |
| width | 宽度设置的是viewport宽度，可以设置device-width |
| initial-scale | 初始缩放比，大于0的数字 |
| maximum-scale | 最大缩放比，大于0的数字 |
| minimum-scale | 最小缩放比，大于0的数字 |
| user-scalable | 用户是否可以缩放，yes或no（1或0） |
2.像素
物理像素：屏幕显示的最小颗粒
pc端1px等于1个物理像素，移动端不同
物理像素比：一个px显示的物理像素点的个数
二倍图 cutterman
background-size: 长度|百分比|cover|contain;
长度只写一个参数，默认是宽度，长度等比缩放
cover把背景图像扩展至足够大，完全覆盖背景区域9（图像可能显示不全）
contain把图像等比缩放，宽或高完全适应内容区域的最大图像（可能有空白）
二倍精灵图
- 在firework里面把精灵图等比例缩放为原来的一半，不要保存
- 之后根据大小测量坐标
- 注意代码里面background-size也要写：精灵图原来宽度的一半
3.移动端开发选择
单独制作移动端页面（主流）
流式布局（百分比布局） JD
flex弹性布局（强烈推荐） 携程
less+rem+媒体查询布局 苏宁
混合布局
响应式页面兼容移动端（其次） 三星 *麻烦，兼容问题
媒体查询
bootstarp
移动端css初始化推荐使用 normalize.css
优点：
保护了有价值的默认值
修复了浏览器的bug
是模块化的
拥有详细的文档
CSS3盒子模型 box-sizing
传统盒子模型计算：盒子宽度=css设置的width+border+padding content-box
CSS3盒子模型：盒子宽度=css设置的width（其中包含了border和padding，不会撑大盒子） border-box
移动端可以全部兼容CSS3盒子模型，PC端如果需要完全兼容则用传统盒子模型，不考虑兼容问题，就选择CSS3盒子模型。
常见移动端特殊样式解决方案
/* CSS3盒子模型 */ box-sizing: border-box; -webkit-box-sizing: border-box;
/* 点击高亮我们需要清除 设置为transparent透明 */ -webkit-tap-highlight-color: transparent;
/* 移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */ -webkit-appearance: none;
/* 禁用长按页面时的弹出菜单 */ img.a { -webkit-touch-callout: none; }
4.移动端常见布局
- 流式布局
-
流式布局，就是百分比布局，也称非固定像素布局。
-
通过子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制,内容向两侧填充。
-
流式布局方式是移动web开发使用的比较常见的布局方式。
-
max-width最大宽度（max-height最大高度）
- min-width最小宽度（min-height最大高度）
-
- flex布局
- rem适配布局
原理：动态设置 html 根标签的 font-size 大小（媒体查询），px 等比换算成 rem
技术方案1：less 、媒体查询 、rem
技术方案2：flexible.js 、rem 更简单 推荐
-
- rem（root em）是一个相对单位
- 类似于 em，em 是父元素字体大小。不同的是 rem 的基准是相对于html元素的字体大小
- 优点：可以通过修改 html 的文字大小来整体修改页面元素的大小
- 类似于 em，em 是父元素字体大小。不同的是 rem 的基准是相对于html元素的字体大小
- 媒体查询（Media Query）是 CSS3 新语法。
- 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
/* 语法规范 */
/* 按大小顺序写 */
<style> @media mediatype and|not|only (media feature) { CSS-Code; } </style> /* 用@media开头注意@符号 */ /* mediatype媒体类型（all，所有设备；print，打印机和打印预览；screen，电脑、平板、手机等） */ /* 关键字 and not only */ /* media feature 媒体特性必须有小括包含（了解三个，width，min-width，max-width） */ - @media 可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
- 目前针对很多苹果手机、Android手机、平板等设备都用到多媒体查询
- 引入资源（理解），当样式比较繁多的时候，我们可以针对不同的媒体使用不同的 stylesheets
/* 语法规范 */ /* 针对不同的屏幕尺寸，调用不同的css文件 */ <link rel="stylesheet" href="stylesheet.css" media="mediatype and|not|only (media feature)">
- 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
- Less （Leaner Style Sheets）是一门 CSS 扩展语言，也成为 CSS 预处理器
- 在 CSS 语法基础上，引入变量，Mixin（混入），运算以及函数等功能
- 常见的 CSS 预处理器有 Sass、Less、Stylus
- rem（root em）是一个相对单位
- 响应式开发
原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备
| 设备划分 | 尺寸区间 | 设置宽度 |
| 超小屏幕（手机） | <768px | 宽度设为100% |
| 小屏设备（平板） | >=768px ~ <992px | 宽度设为750px |
| 中等屏幕（桌面显示器） | >=992px ~ 1200px | 宽度设为920px |
| 宽屏设备（大桌面显示器） | >=1200px | 宽度设为1170px |
-
- Bootstrap
- 来自 Twitter，是目前最受欢迎的前端框架，基于 HTML、CSS 和 JavaScript，简单灵活
- 优点：标准化的 html + css 编码规范。简洁、直观、强悍的组件。不断更新迭代，开发更简单效率
- 版本
- 2.x.x，停止维护，兼容性好，代码不够简洁，功能不够完善
- 3.x.x，目前使用最多，稳定，但是放弃了IE6-IE7，IE8支持但效果不好，偏向用于开发响应式布局、移动设备优先的WEB项目
- 4.x.x，最新版，目前还不是很流行
Bootstrap提供的两个容器 container类 container-fluid类 响应式布局容器固定宽度
1170px
920px
750px
100%
类前缀：
.col-lg-
.col-md-
.col-sm-
.col-xs-
流式布局容器百分百宽度
占据全部视口容器
适合单独做移动端开发
- Bootstrap
-
-
- 栅格系统
- 将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
- Bootstrap 自动将 container 分为12列
- 通过一系列行与列的组合来创建页面布局
- =12，占满 container。<12，会有空白。>12，换行
- 可以同时为一列指定多个设备类名，以便划分不同分数，例如 class="col-md-4 col-sm-6"
- 列嵌套，col 中嵌套 row，可消除 padding
- 列偏移，.col-md-offset-* 可以将列向右偏移几份，实际上是添加了 margin-left
- 列排序，.col-md-push-* 和 .col-md-pull-* 可以改变列的顺序
- 隐藏 .hidden-xs（隐藏超小屏）...相反的是显示 .visible-xs
- 栅格系统
-