移动端布局（rem、vw、less语法）

移动端的适配方案：

1. flex + rem单位 做适配效果
2. flex + viewport width /vh单位 做适配效果

 

rem

• px 绝对单位，
• em 相对单位 当前标签的 font-size 属性的值
• rem 相对单位 html 标签的 font-size 属性的值

1. 通常 1rem = 1个html 标签的 font-size 属性的值，可以通过 媒体查询 来判断窗口大小来修改 html 标签字号
2. 可以通过引入 flexible.js 文件来适配不同设备时 html 文字大小，这样就可以让盒子配合rem完成适配。

 

媒体查询

语法格式：

/* 当设备宽度为 320px  设置 html 字体大小 32px */
@media (width: 320px) {
   html {
     font-size: 32px;
   }
}   
/*
其他属性： 
min-width: 像素值    大于、等于像素值时执行对应css样式
max-width: 像素值    小于、等于像素值时执行对应css样式
*/

 

less 语法

作用： Less是一个CSS预处理器,扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
 

注释

单行
	// 注释内容
	ctrl + /
块
	/* 注释内容 */
	alt + shift + A

嵌套

作用: 生成后代选择器

父选择器 {
  子选择器{}
}

// & 不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
.box {
    width: 400px;
    height: 400px;
    .son {
        width: 100px;
        height: 100px;
    }
    &:hover .son {
        // @colorred 是定义的颜色变量
        background-color: @colorred;
    }
}   

生成的css语法：

 

运算

作用: 完成常用数学计算

// 当有多个单位时，以第一个单位为准
width: 10rem + 10px;
height: (375 / 30px);
height: 375 ./ 30px;   

变量

作用： 存储数据，方便修改和使用

1. 定义变量
   @变量名: 值;
2. 使用变量
   CSS属性: @变量;

导入

作用： 引入其他 less 文件

1. @import: ‘文件及路径’;
2. @import: url();

导出

作用： 指定 less 文件导出 css 文件的路径

1. 单独控制某个Less文件导出路径
   less文件第一行添加 // out：路径
2. 禁止导出CSS文件
   less文件第一行添加： // out: false

 

vw、wh单位

相对单位，根据设备视口的宽度改变而改变

• vw：viewport width
  1vw = 1/100视口宽度
• vh：viewport height
  1vh = 1/100视口高度