rem布局需要知道些什么

最新推荐文章于 2022-01-02 16:07:49 发布

原创最新推荐文章于 2022-01-02 16:07:49 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

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 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype媒体类型

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

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

关键字

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

and：可以将多个媒体特性连接到一起，相当于“且”的意思
not：排除某个媒体类型，相当于“非”的意思，可以省略
or：可以测试多个媒体查询的条件，只要有一个条件成立，就执行，“或”的意思
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。
我们暂且了解三个。
注意他们要加小括号进行包含

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域的宽度
max-width	定义输出设备中页面最大可见区域的宽度

@media screen and (min-width: 800px) {
    body {
        background-color: pink;
    }
}
@media screen and (man-width: 600px) {
    body {
        background-color: green;
    }
}

媒体查询案例-背景变色

按照从大到小的或者从小到大的思路
注意我们有最大值max-width和最小值mixwidth都是包含等于的
当屏幕小于540像素，背景颜色为蓝色（x <= 539）
当屏幕大于等于540像素，并且小于等于969像素的时候背景色为绿色（540 =< x <= 969）
当屏幕大于等于970像素的时候，背景颜色为红色（x >= 970）

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写，但是我们最喜欢的还是从小到大来写，这样代码更简洁

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 1.屏幕小于等于539px 时，背景为蓝色 */
    @media screen and (max-width: 539px) {
      body {
        background-color: blue;
      }
    }
    /* 2.屏幕大于等于540px 并且 小于等于 969px 时，背景为绿色 */
    /* @media screen and (min-width: 540px) and (max-width: 969px) {
      body {
        background-color: green;
      }
    } */
    @media screen and (min-width: 540px) {
      body {
        background-color: green;
      }
    }
    /* 3.屏幕大于等于 970px 时，背景为红色 */
    @media screen and (min-width: 970px) {
      body {
        background-color: red;
      }
    }
  </style>
</head>
<body>
  
</body>
</html>

媒体查询和rem实现元素变化

rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询 + rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    /* rem 单位 */
    /* 这是默认的 html 的字号 */
    html {
      font-size: 20px;
    }
    /* 屏幕小于640px，让 html 的字号为 20px */
    /* @media screen and (max-width: 639px) {
      html {
        font-size: 20px;
      }
    } */
    /* 屏幕大于等于640px，让 html 的字号为 30px */
    @media screen and (min-width: 640px) {
      html {
        font-size: 30px;
      }
    }
    .box {
      width: 100%;
      height: 3rem;
      background-color: green;
      font-size: 1.5rem;
      line-height: 3rem;
      color: #fff;
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="box">购物车</div>
</body>
</html>

媒体查询引入资源方式

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets（样式表）
原理，就是直接在<link>中判断设备的尺寸，然后引用不同的css文件

语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

示例

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

CSS的弊端

CSS是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
不方便维护及扩展，不利于复用
CSS没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

less简介和安装

Less(Leaner Style Sheets 的缩写) 是一门CSS扩展语言，也称为CSS预处理器
作为CSS的一种形式的扩展，他并没有减少CSS的功能，而是在现有CSS语法上，为CSS加入程序式语言的特性
它在CSS的语言基础之上，引入变量，Mixin（混入）运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情

Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less是一门CSS预处理语言，它扩展了CSS的动态特性

Less安装

安装node.js，可选择最新的版本，网址：http://nodejs.org/en/download
检查是否安装成功，使用cmd命令（win10是window + r 打开运行输入cmd）—输入“node-v” 查看版本即可
基于node.js在线安装Less，使用cmd命令“npm install -g less”即可
检查是否成功，使用cmd命令“lessc-v”查看版本即可

less变量

我们首先新建一个后缀名为.less的文件，在这个.less文件里面书写Less语句。

变量是指没有固定的值，可以动态改变的。因为我们CSS中的一些颜色和数值等经常使用。
@变量名: 值;

变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
```
@color: pink;
@COLER: deeppink;
```

变量使用规范

<!-- 直接使用 -->
body{
    color: @color;
}
a:hover {
    color: @COLER;
}

less编译和VSCode插件

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件
所以，我们需要把我们的.less文件，编译生成为.css文件，这样我们的html页面才能使用。
推荐方法（nodejs）：在当前文件夹，使用cmd命令"lessc style.less > style.css"

VSCode Less插件

Easy LESS插件用来把less文件编译为css文件
安装完毕插件，重新加载vscode
只要保存一下Less文件，会自动生成CSS文件

less嵌套

常用写法

#header .logo {
  width: 300px;
}

Less嵌套写法

#header {
  .logo {
    width: 300px;
  }
}

如遇见（交集|伪类|伪元素选择器）

内层选择器的前面没有&符号，则他被解析为父元素的后代；
如果有&符号，他就被解析为父元素自身或父元素的伪类

常用写法

a:hover {
  color: red;
}

Less嵌套写法

a {
  &:hover {
    color: red;
  }
}

less运算

任何数字、颜色或者变量都可以参与运算。Less提供了加（+）减（-）乘（*）除（/）

// Less 里边写
@width: 10px + 5;
div {
  border: @width solid red;
}

// 生成的css
div {
  border: 15px solid red;
}

// Less 还可以这样写
width: (@width + 5) * 2;

注意：
- 参与运算的两个数字，可以一个有单位，一个没单位，最终单位就是唯一的单位
- 参与运算的两个数字，两个都有单位，最终单位取第一个数字的单位
- less的运算符左右必须加空格

rem适配原理

我们的适配目标是什么
- 让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备
怎么去达到这个目标
- 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
在实际开发当中怎么使用
- 技术方案1
  - less
  - 媒体查询
  - rem
- 技术方案2
  - flexible.js
  - rem

总结：

两种方案现在都存在。
方案2更简单。

rem适配方案1 实现技巧

rem + 媒体查询 + less技术

设计稿常见尺寸宽度

设备	常见宽度
iphone4.5	640px
iphone678	750px
Android	常见320px、480px、540px、600px、720px、768px、800px、1080px；目前市场主流设备尺寸按照1080设计

一般情况下，我们以一套或两套效果图适应大部分屏幕，放弃极端屏或对其优雅降级，牺牲一些效果，现在基本以750为准

rem实际开发适配方案1
1. 假设设计稿是750px
2. 假设我们把整个屏幕划分15等份（划分标准不一可以是20份也可以是10等份）
3. 每一份作为html字体大小，这里就是50px
4. 那么在320px设备的时候，字体大小为320/15 就是21.33px
5. 那我们页面元素的大小，除以不同的html字体大小会发现他们比例还是相同的

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