03.移动web-开发准备

Posted 2020-11-25 好好学习，天天向上

1.技术选型

方案：我们采取单独制作移动页面方案
技术：布局采取rem适配布局（less+rem+媒体查询）
设计图：750px设计尺寸

2.搭建相关文件夹结构

css/images/upload/index.html

3.设置视口标签引入初始化样式

<meta name="viewport" content="width=device-width, initial-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

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文字大小
//划分为15em
@number:15;
//320
@media screen and (min-width:320px){
    html{
        font-size: 320px / @number;
    }
}
//360
@media screen and (min-width:360px){
    html{
        font-size: 360px / @number;
    }
}
//375 iphone 678
@media screen and (min-width:375px){
    html{
        font-size: 375px / @number;
    }
}
//384
@media screen and (min-width:384px){
    html{
        font-size: 384px / @number;
    }
}
//400
@media screen and (min-width:400px){
    html{
        font-size: 400px / @number;
    }
}
//414
@media screen and (min-width:414px){
    html{
        font-size: 414px / @number;
    }
}
//424
@media screen and (min-width:424px){
    html{
        font-size: 424px / @number;
    }
}
//480
@media screen and (min-width:480px){
    html{
        font-size: 480px / @number;
    }
}
//540
@media screen and (min-width:480px){
    html{
        font-size: 540px / @number;
    }
}
//720
@media screen and (min-width:720px){
    html{
        font-size: 720px / @number;
    }
}
//750
@media screen and (min-width:750px){
    html{
        font-size: 750px / @number;
    }
}