响应式布局简单知识

响应式布局

1、rem基础

rem单位：是一个相对单位，类似于em，em相对于父元素的字体大小来说的；

rem的基准是相对于 Html 元素的字体大小

优点：可以通过修改html中的大小来控制整个页面字体的大小

2、媒体查询

规则

媒体查询一般按照从大到小或从小到大的顺序来

@media screen and (max-with: 539px){
    body{
        background-color: blue;
    }
}
/*
@media screen and (min-with: 540px) and (max-with: 969px){
    body{
        
    }
}*/
/*CSS的层叠样式*/
@media screen and (min-with: 540px){
    body{
        background-color: green;
    }
}
@media screen and (min-with: 970px){
    body{
        background-color: red;
    }
}

从小到大写，代码更加简洁；

引入外部资源

根据不同的屏幕尺寸引入不同的CSS文件，调用不同的CSS文件

<link rel = "stylesheet" href = "xxx.css" media = "screen and (min-with: 320px)" >
<link rel = "stylesheet" href = "xxx.css" media = "screen and (min-with: 640px)" >

3、Less基础

3.1 Less安装

安装Node.js，官网：http://kik.cn/download/
通过cmd窗口查看是否安装成功及版本号：node -v
使用cmd命令：npm install -g less 对Less进行安装
使用命令了lessc -v看是否安装成功和安装的版本号

3.2 Less的使用

Less变量

定义颜色变量：@变量：颜色；

@color: pink;
/*
    变量定义规则：
        1、不能包含特殊字符；
        2、不能以数字开头；
        3、大小写敏感，区分大小写；
*/
body{
    background-color: @color;
}
div{
    color: @color;
}

Less编译

Easy LESS插件进行将less文件编译成css文件；

Less嵌套

1、子元素可以直接在父元素里面；

.header {
    width: 200px;
    height: 200px;
    a {
        color: pink;
    }
}

2、伪类、交集选择器、伪元素选择器：使用&符号

.header {
    width: 200px;
    height: 200px;
    a {
        color: pink;
        &:hover{
            color: blue;
        }
    }
}

Less运算
```
@border: 5px + 5;
div{
    width: 200px - 100;
    height: （ 200px + 200 ）* 2;
    border: @border solid red;
}
```
注意：
1. 运算符左右两边要用空格隔开；
2. 两个数参与运算，如果只有一个数有的单位，则最后的结果就以这个单位为准；
3. 两个数参与运算，如果两个数都有单位，且是两个不同的单位，最后结果以第一个单位为准；