03.移动web-开发准备
1.技术选型
```
方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局（less+rem+媒体查询）
设计图：750px设计尺寸
```
2.搭建相关文件夹结构
```
css/images/upload/index.html
```
3.设置视口标签引入初始化样式
```
```
4.设置公共common.less文件
```
1.新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要
2.尺寸320px.360px,375px,384px,400px,414px,424px,480px,540px,720px,750px
3.划分15等分
4.pc端也可以打开，so html设置字体大小为50px
```
```
//设置常见的屏幕尺寸。修改里面的html文字大小
//划分为15份
html{
font-size: 50px;
}
@number:15;
//320
@media screen and (min-320px){
html{
font-size: 320px / @number;
}
}
//360
@media screen and (min-360px){
html{
font-size: 360px / @number;
}
}
//375 iphone 678
@media screen and (min-375px){
html{
font-size: 375px / @number;
}
}
//384
@media screen and (min-384px){
html{
font-size: 384px / @number;
}
}
//400
@media screen and (min-400px){
html{
font-size: 400px / @number;
}
}
//414
@media screen and (min-414px){
html{
font-size: 414px / @number;
}
}
//424
@media screen and (min-424px){
html{
font-size: 424px / @number;
}
}
//480
@media screen and (min-480px){
html{
font-size: 480px / @number;
}
}
//540
@media screen and (min-480px){
html{
font-size: 540px / @number;
}
}
//720
@media screen and (min-720px){
html{
font-size: 720px / @number;
}
}
//750
@media screen and (min-750px){
html{
font-size: 750px / @number;
}
}
```
5.在其他less文件内引入common.js文件
```
//@import 导入的意思，可以把一个样式文件到入到另一个样式文件里面
@import "common";
```