（1）在浏览器和移动端能够良好展示页面,头部新增内容
快捷键meta:vp+tab
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
最后一个属性不是必要的
位于
<meta charset="UTF-8">后
css样式表前
（2）页面宽度随用户操作变化,且不发生变形现象
装满移动端宽度
width:100%;
设置最小和最大宽度让移动端不变形
max-width:640px;
min-width:320px;
通常为640和320px
（3）2倍图
有时图片的分辨率和大小不能很好地适配页面
采用2倍图方法
background-size:200px 200px;宽度像素 长度像素
（4）搜索框随页面缩放长度方式改变
1flex
2margin:0 100px;
3padding:0 100px;
搜索框部分宽度参照父容器,不能人为设置具体宽度 左右浮动的话没有效果
max-width: 640px;
/* 不填的话浏览器会溢出 */
width: 100%;
（5）使图片基线对齐不出现下方空隙
/*1.设置为块元素
2.可以将文本的字体大小设置为0
3.vertical-align:bottom*/
其中1如果同时要使图片水平居中
可以改写为display:inline-block;
（4）多个相同元素其中部分样式不同
li:first-of-type 第一个li
span:nth-last-of-type(3n) span中3的倍数
（5）雪碧图坐标方向与正常坐标图同
（6）页面构造
对页面功能进行划分
在对功能进行细化
其中在产品栏中虽然具体内容不一样
但构造都是一样的所以采用相同的类名和样式
其中对特殊部分新增空白类
以便能够区分和避免修改时对全部进行修改
（7）父元素高等为0
是被内部子元素浮动且父元素未设置高度导致无法撑开宽度
方法是对父清除浮动