less 的一些简单用法

Rem,媒体查询适配方案

Less基础语法介绍

作用: 维护CSS, 按照CSS的基本语法去写.

https://less.bootcss.com/

变量

☞@自定义变量名: 值;
    例如:
    @nav_bgcolor: red;
    nav {
        color: @nav_bgcolor;
    }

☞变量的运算:
	@width: 10;
    nav {
		width: @width * 3px;
    }

混合

☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)

例如:
	.test() {
        width: 50px;
        height: 50px;
    }

    nav {
        调用样式
        .test();
    }

    header {
        .test();
    }

☞ 可以设置参数
例如:
.test(@width) {
    width: @width;
}

nav {
    .test(100px);
}


☞ 可以为参数设置默认值
例如:
.test(@width: 100px) {
    width: @width;
}
nav {
    .test();
}
header {
    .test(50px);
}

嵌套

例如:
nav {
    ul {
        li {

        }
    }
}

Less特点小结：

• 支持嵌套写法（结构清晰）
• 支持变量写法（维护方便）
• 支持函数写法（复用性强）
• 支持数学运算

媒体查询

什么是媒体查询?

1, 媒体指的就是各种设备(移动设备,PC设备)
2, 查询指的就是要检测属于哪种设备
总结:
	媒体查询:通过查询当前属于哪种设备,让网页能够在不同的设备下正常的预览

学习媒体查询的核心是什么?

实现页面在不同设备下正常预览.[判断当前设备]

媒体类型

 将不同的设备划分为不同的类型,称为媒体类型

• all (所有的设备)
• print (打印设备)
• screen(电脑屏幕,平板电脑),智能手机

媒体特性

用来描述设备的特点,比如宽度,高度...

• width 网页显示区域完全等于设置的宽度
• height 网页显示区域完全等于设置的高度
• max-width / max-height 网页显示区域小于等于设置的宽度
• min-width / min-width 网页显示区域大于等于设置的宽度
• orientation: portrait (竖屏模式) | landscape (横屏模式)

语法关键字

目的将媒体类型和媒体特性链接到一块,进行设备检测

• and 可以将多个媒体特性链接到一块,相当于且
• not 排除某个媒体特性 相当于非,可以省略
• only 指定某个特定的媒体类型, 可以省略

语法

• 外联式语法

  <link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)">
  

• 内嵌式语法

  @media only screen  and (max-width: 420px) {
  	body {
  		background-color: red;
  	}
  }
  
  备注: 多个条件联写
  @media only screen and (width: 320px) and (height: 568px) {}
  

Rem

什么是REM?

Rem: 是一个单位,是一个相对单位

em: 是一个单位,是一个相对单位,参照当前文字大小设置的

Rem的特点?

参照HTML根标签的文字大小

Rem如何实现适配?

1. 常见的UI稿件尺寸大小 640px(20份)  或者  750px(常见)[25份]

优惠活动综合案例演示适配方案