一、响应式布局

 

　　（1）模块中内容：挤压——拉（布局不变）

 

　　（2）模块中内容：换行——平铺（布局不变）

 

　　（3）模块中内容：删减——增加（布局不变）

 

　　（4）模块位置变换（布局改变）

 

　　（5）模块展示方式改变：隐藏——展开（布局改变）

 

　　（6）模块数量改变：删减——增加（布局改变）

 

　　【因为考虑因素过多，代码冗余，除非特殊要求，用响应式布局】

 

　　例子：

 

　　section{

 

　　width: 100%;

 

　　display: flex;

 

　　}

 

　　div:nth-child(1){

 

　　width: 600px;

 

　　height:200px;

 

　　background-color: chocolate;

 

　　flex-grow: 1;

 

　　}

 

　　div:nth-child(2){

 

　　width: 300px;

 

　　height:200px;

 

　　background-color: cornflowerblue;

 

　　flex-grow: 1;

 

　　}

 

　　div:nth-child(3){

 

　　width: 300px;

 

　　height:200px;

 

　　background-color: crimson;

 

　　flex-grow: 1;

 

　　}

 

　　@media all and (max-width:800px) {

 

　　section{

 

　　flex-wrap: wrap;

 

　　justify-content: space-between;

 

　　}

 

　　div:nth-child(2),div:nth-child(3){

 

　　flex-grow: 0;

 

　　}

 

　　}

 

　　二、meta标签（了解，具体可百度）

 

　　改变小图标

 

　　<link rel="shortcut icon" href="favicon.ico【图片目录】" type="image/x-icon">

 

　　三、移动端准备工作

 

　　em是根据自身字号大小适应高度，如果自身没有设置字号，找父级字号，都没有默认16px

 

　　rem是根据html设置的字号适应高度，如果没有设置也是默认16px

 

　　【如果使用rem一定要记得设置html字体】

 

　　移动端一般设计图的大小:640px / 750px / 1080px根据设计图的大小确定dpr的值:

 

　　如果设计图为640px >>> dpr为2【iPhone5】

 

　　如果设计图为750px >>> dpr为2 【iPhone6/7/8】

 

　　如果设计图为1080px >>> dpr为3 【puls】

 

　　如果给640的图需要适配750，就将 font-size写成31.25

 

　　640 font=31.25vw时 1rem=100px