1、视口标签
2、css3新盒子模型
div:nth-child(2) {
/* 有了这句话就让盒子变成CSS3盒子模型 */
/* padding 和 border 不会再撑大盒子了 */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
border: 10px solid blue;
}
3、特殊样式
/*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、流式布局（百分比布局） 宽度设为百分比
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
5、移动端常用开发代码，Normalize.css初始化工具
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
body {
margin: 0 auto;
min-width: 320px;
max-width: 640px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
color: #666;
}
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft
Yahei",STXihei,hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
Normalize.css 是一个非常实用的工具，它可以帮助开发者在不同的浏览器环境中获得一致的渲染效果。
通过使用 Normalize.css，你可以减少调试和适配不同浏览器的时间，专注于创建高质量的 Web 应用。
一、移动端flex布局
1、display: flex; 使用后float,clear,vertical-align将失效
div{
display: flex;
justify-content: space-around; //平均分排列
}
div span{
margin-right: 5px;
flex: 1;
}
2、flex常见父级属性
以下由6个属性是对父元素设置的
1、flex-direction：设置主轴的方向 为x轴还是y轴
row (默认从左到右 x轴横着排) row-reverse(右到左)
★column (从上到下 y轴竖着排) column-rever（下到上）
2、justify-content：设置主轴上的子元素排列方式
flex-start 默认值 从头部开始 如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则 水平居中）
space-around 平分剩余空间
★space-between 先两边贴边 再平分剩余空间（重要）
3、flex-wrap：设置子元素是否换行
nowrap 默认值，不换行 会自动缩小盒子
★wrap 换行
4、align-content：设置侧轴上的子元素的排列方式（多行）
flex-start 从上到下
flex-end 从下到上
★center 挤在一起居中（垂直居中）
stretch 拉伸 （默认值 ）
5、align-items：设置侧轴上的子元素排列方式（单行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），
在单行下是没有效果的。
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，再平分剩余空间
stretch 设置子项元素高度平分父元素高度
6、flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-flow:column wrap
3、flex子元素常见属性
flex 子项目占的份数
.item { 分配剩余空间
flex: <number>; /* default 默认为 0 */
}
align-self 控制子项自己在侧轴的排列方式
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式 */
align-self: flex-end;
}
order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0。
注意：和 z-index 不一样。
.item {
order: <number>;
}
4、渐变背景色设置
background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue);
background: -webkit-linear-gradient(left top, red , blue)
二、rem布局，通过控制字体大小，进而控制页面元素大小
1、媒体查询media
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
div {
width: 2rem;
height: 2rem;
background-color: pink;
}
<link rel="stylesheet" href="style320.css"
media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css"
media="screen and (min-width: 640px)">
2、简洁高效的rem适配方案flexible.js
github地址：github.com/amfe/lib-fl…
