移动端适配
移动端特点
移动端和PC端网页不同点
- PC屏幕大，网页固定版心
- 手机屏幕小，网页宽度多数为100%
谷歌模拟器
浏览器按F12打开调试模式，选择手机模拟器
分辨率
屏幕尺寸
屏幕尺寸指的是对角线的长度，一般用英寸来度量
分辨率
- 物理分辨率(出厂设置)
- 逻辑分辨率(软件分辨率)
| 手机型号 | 物理分辨率 | 逻辑分辨率 | 比例关系 |
|---|---|---|---|
| iPhone3GS | 320*480 | 320*480 | 1:1 |
| iPhone4 | 640*960 | 320*480 | 2:1 |
| iPhone5 | 640*1136 | 320*568 | 2:1 |
| iPhone7/8 | 750*1334 | 375*667 | 2:1 |
| iPhoneX/XS/11 Pro | 1125*2436 | 375*812 | 3:1 |
| iPhoneXR/11 | 828*1792 | 414*896 | 2:1 |
| iPhoneXS Max/11 Pro Max | 1242*2688 | 414*896 | 3:1 |
| iPhone12mini | 1080*2340 | 360*780 | 3:1 |
| iPhone12/12 Pro | 1170*2532 | 390*844 | 3:1 |
| iPhone12 Pro Max | 1284*2778 | 428*926 | 3:1 |
视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">布局
百分比布局
移动适配
长度单位
rem
注
1rem=1html字号大小
Vw/vh
媒体查询
@media(媒体属性){
选择器{
CSS属性
}
}Less/Scss
注释
// 单行注释
/*
块注释
第二行
第三行
*/计算
变量
less
// 1. 定义. 2.使用
@colora:green;
.box {
color: @colora;
}
.father {
background-color: @colora;
}
.aa {
color: @colora;
}scss
导入
//less
@import '体验less.less';
//scss
@import '体验less.scss';
//简写
@import '注释';