# web-html-css-移动端
**Repository Path**: xiyg/web-html-css-mobile-terminal
## Basic Information
- **Project Name**: web-html-css-移动端
- **Description**: html移动端适配和app端布局和页面布局
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-24
- **Last Updated**: 2023-03-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#[移动端web](https://www.bilibili.com/video/BV1xq4y1q7jZ?p=74&spm_id_from=pageDriver&vd_source=66946dde0e6b3728e09de59dc5007826)
#### [字体图标库](https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.5&type=1)
##### 选择官方矢量库-选择图标加入购物车-新建项目-下载到本地-导入样式-引入使用
#### [前端兼容性自查工具](https://caniuse.com/?search=flex)
#### [字体图标的使用](https://gitee.com/xiyg/web-html-css-mobile-terminal/blob/master/day01/02-PPT/移动web%20第一天.pdf)
#### [平面转换](https://gitee.com/xiyg/web-html-css-mobile-terminal/blob/master/day02/04-预习/PPT/移动web%20第二天.pdf)
#### [动画](https://gitee.com/xiyg/web-html-css-mobile-terminal/blob/master/day02/04-预习/PPT/移动web%20第二天.pdf)
#### [Flex布局](https://gitee.com/xiyg/web-html-css-mobile-terminal/blob/master/day01/平面转换和动画/28-移动端flex布局和案例/02-PPT/移动web%20第三天.pdf)
#### [移动适配](https://gitee.com/xiyg/web-html-css-mobile-terminal/blob/master/移动适配/day05/02-PPT/移动web%20第五天.pdf)
##### 移动适配的原理：移动适配的原理是移动网页根据不同屏幕的尺寸展示不同的大小来达到适配的目的，目前有两种适配方案：
- rem适配方案：
如果要适配不同的视口屏幕，那么不同的屏幕要有不同的字号。比如375屏幕字号是37.5px，320字号是32px，414字号是41.4，一般习惯以视口的1/10作为字号，那么如何设定字号呢？
这时候就使用媒体查询，媒体查询可以做到不同屏幕设置不同字号：
```
@media (width:320px) {
html{
font-size: 32px;
}
}
@media (width:375px) {
html{
font-size: 37.5px;
}
}
@media (width:414px) {
html{
font-size: 41.4px;
}
}
```
如果一个box设置宽度和高度时5rem和3rem时
```
.box {
width: 5rem; /* width = 20*5 height=20*3*/
height: 3rem;
background-color: pink;
}
```
- 那么在375的宽度和高度是：width：37.5X5px，height：37.5X3px
- 那么在320的宽度和高度是：width：32X5px，height：32X3px
- 那么在414的宽度和高度是：width：41.4X5px，height：41.4X3px
那么问题来了，随着手机的屏幕尺寸越多，如何做到所有的手机屏幕都适配呢，就要使用阿里开发的flexible.js,这个苦基本上适配了所有的手机屏幕字号，免去我们写那么多媒体查询的代码了。
```
Document
```
还有一个问题是，一般我们拿到的设计图是px，我们如何将px换算成rem呢？
```
.box{
/* 大小为69*29px大小的，是多少rem呢
设计图一般都是375视口的
一般字号为十分之一，37.5
换算成rem：rem * 37.5 = 69
rem = 69/37.5
因而： width = 69/37.5 ， height = 29/37.5
*/
width: 1.84rem;
height: 0.77rem;
background-color: blue;
}
```
那么问题又来了虽然我们可以将px换算成rem，但是我们这样计算未免太麻烦了吧，less可以帮助我们解决这一问题
在vscode安装插件：easy less后：
我在.less文件写代码：
```
.father{
width: (68/37.5rem);
height: (29/37.5rem);
.son{
background-color: pink;
}
}
```
会对应生成.css代码：
```
.father {
width: 1.81333333rem;
height: 0.77333333rem;
}
.father .son {
background-color: pink;
}
```
- vw/vh适配方案：
采用视口宽度的1/100，或视口高度的1/100作为根字号，比如设计师给到的设计图是375的，那么此时根字号就是：
```
375/100 = 3.75
```
如果要设计width：68px 高： 29px 的设计图：那么就是
```
68/3.75 = 18.13333333333vw
29/3.75 = 7.73333333333vw
```
或者
```
667/100 = 6.67
68/6.67 = 10.1949vh
29/6.67 = 4.3478 vh
```
每次都需要计算，因此使用less可以生成css