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(电脑屏幕,平板电脑),智能手机
媒体特性
用来描述设备的特点,比如宽度,高度...
1
width        网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测
1
and        可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性 相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略
语法
外联式语法

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

@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份]

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(电脑屏幕,平板电脑),智能手机
媒体特性
用来描述设备的特点,比如宽度,高度...
1
width        网页显示区域完全等于设置的宽度
height 网页显示区域完全等于设置的高度
max-width / max-height 网页显示区域小于等于设置的宽度
min-width / min-width 网页显示区域大于等于设置的宽度
orientation: portrait (竖屏模式) | landscape (横屏模式)
语法关键字
目的将媒体类型和媒体特性链接到一块,进行设备检测
1
and        可以将多个媒体特性链接到一块,相当于且
not 排除某个媒体特性 相当于非,可以省略
only 指定某个特定的媒体类型, 可以省略
语法
外联式语法

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

@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份]