响应式布局

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安装

1. 安装Node.js，官网：http://kik.cn/download/

2. 通过cmd窗口查看是否安装成功及版本号：node -v

3. 使用cmd命令：npm install -g less 对Less进行安装

4. 使用命令了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. 两个数参与运算，如果两个数都有单位，且是两个不同的单位，最后结果以第一个单位为准；

4、rem适配方案

4.1适配方案1（rem+媒体查询+less技术）

1. 假设设计稿是750px;

2. 假设我们把整个 屏幕划分为15等分（划分标准不一定，可以是20份，也可以是10份）；

3. 每一份作为html字体大小，这里就是50px

4. 那么在320px设备的时候，字体大小为320/15，就是21.33px

5. 用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

6. 比如我们以750为标准设计稿

7. 一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem * 2rem 比例是1比1

8. 320屏幕下，html字体大小为21.33，则2rem = 42.66px，此时的宽和高都是42.66，但宽和高的比例还是1比1

9. 但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果；

 

标签：body,知识,字体大小,Less,color,布局,响应,rem,200px
来源： https://www.cnblogs.com/zw-521/p/16575905.html