移动端特点

移动端和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">

布局

百分比布局

flex布局

grid布局

响应式

移动适配

长度单位

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 '注释';