rem布局，less基础，媒体查询

rem 单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小；

不同的是rem的基准相对于html元素的字体大小；

比如，根元素（html）设置 font-size: 12px; 非根元素设置 width: 2rem; 此时换算成px表示 24px；

rem优点：就是可以通过修改html里面文字大小来改变页面中元素的大小可以整体控制；

媒体查询

媒体查询（Media Query）是 CSS3 新语法；

• 使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
• @media 可以针对不同的屏幕尺寸设置不同的样式；
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
• 目前针对很多苹果手机，Android手机，平板等设备都用得到多媒体查询；

@media mediatype and|not|only (media feature) {
  css-code;
}
/* 
  @media：关键字；
  mediatype：媒体类型；
  and|not|only：关键字；
  media feature：媒体特性 必须有小括号包含
*/

mediatype 查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

关键字

关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

• and：可以将多个媒体特性连接在一起，相当于 且 的意思；
• not：排除某个媒体特性，相当于 非 的意思，可以省略；
• only：指定某个特性的媒体类型，可以省略；

媒体特性

每种媒体类型都具有各自不同的属性，根据不同媒体类型的媒体特性设置不同的展示风格，注意要加小括号

示例

/* 建议从小往大开始写 */
@media screen and (max-width: 539px) {
  body {
    background-color: pink;
  }
}
/* 这里最后一个条件可以去掉，为了演示多个写法故而加上 */
@media screen and (min-width: 540px) and (max-width: 7990px) {
  body {
    background-color: hotpink;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: plum;
  }
}

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）；

原理：就是直接在link标签中判断设备尺寸，然后引入不同的css文件；建议从小到大书写；

<link rel="stylesheet" href="./width320.css" media="screen and (min-width: 320px)" />
<link rel="stylesheet" href="./width640.css" media="screeb and (min0-width: 640px)" />

less 基础

less 介绍

Less (Leaner Style Sheets 的缩写) 是一门css扩展语言，也称为 css预处理器；

作为css一种形式的拓展，它并没有减少css的功能，而是在现有的语法上，为css加入程序式的语言特性；

它在css的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了css的编写，并且降低了css的维护成本；

Less中文网：http://lesscss.cn/

常见的css预处理器：Less， Sass， Stylus

less 安装

• 安装 node.js
• npm install -g less
• lessc -v 检查 less 版本

less 编译

.less 文件是无法被html识别的，这里推荐一个 vscode 插件 easy Less，此插件可以把less文件编译成css文件

less 变量

// @变量名: 值;
// 上面引用，下面调用，开头必须是@
@color: pink;
body {
  background-color: @color;
}

less 嵌套

1. 子元素的样式直接写到父元素里面

   .nav {
     .logo {
       color: pink;
     }
   }

2. 伪类，交集选择器，伪元素选择器，内层选择器前加 &

   a {
     &:hover {
       content: "";  
     }
   }

less 运算

@border: 5px + 1;
body {
  width: 200px - 50;
  height: 200px * 0.5;
  // 如果前后运算的值都存在单位，那么以第一个为准
  border: (@border + 1) / 7 + 1rem;
}

rem适配方案

1，让一些不能等比例自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备

2，使用媒体查询根据不同设备按照比例设置html字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会跟着变化，从而达到等比缩放的效果；

实际开发适配方案

1，按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）

2，css中，设计稿元素的宽，高，相对位置等取值，按照同等比例换算为 rem 为单位的值；

动态设置html标签 font-size 大小

1， 假设设计稿是750px

2， 假设我们把整个屏幕划分为15等份（可以是20也可以是10）

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

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

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

6， 比如以750为标准的设计稿，一个100 * 100的盒子 就是100/50转换为rem就是 2rem * 2rem；320的屏幕下，html的字体大小为21.33 则 2rem = 42.66px 此时宽和高还是等比例缩放；但是已经实现了不同屏幕下，元素盒子等比例缩放

元素大小的取值方法

1， 最后的公式：页面的rem值 = 页面元素（px） / （屏幕宽度 / 划分的份数）

2， 屏幕宽度 / 划分的份数就是 html font-size 的大小

3， 或者页面元素的 rem = 页面元素值 / html font-size大小

rem布局，less基础，媒体查询

原文：https://www.cnblogs.com/article-record/p/12514924.html