rem布局适配

最新推荐文章于 2024-04-07 09:05:27 发布

北笙l

最新推荐文章于 2024-04-07 09:05:27 发布

阅读量746

点赞数

文章标签： html5 css3 less

本文链接：https://blog.csdn.net/weixin_48376132/article/details/117574988

版权

rem适配布局

1. rem单位

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

rem的基准是相对于<html>元素的字体大小

rem的优势：整个页面只有一个<html>，可以通过修改<html>里面的字体大小来改变页面中元素的大小，可以整体控制

媒体查询

媒体查询（Media Query），CSS3的新语法

@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

1. 语法规范

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

注意：@media开头，media feature媒体特性必须有小括号包含

2. mediatype 媒体类型

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

值及解释说明

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕，平板电脑，智能手机等

3. 关键字

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

and：可以将多个媒体特性连接到一起，相当于“且”的意思

not：排除某个媒体类型，相当于“非”的意思，可以省略

or：可以测试多个媒体查询的条件，只要有一个条件成立，就执行，“或”的意思

only：指定某个特定的媒体类型，可以省略

4. 媒体特性

根据不同媒体类型的媒体特性设置不同的展示风格，先了解三个，注意加小括号包含

width：定义输出设备中页面可见区域的宽度

min-width：定义输出设备中页面最小可见区域的宽度

max-width：定义输出设备中页面最大可见区域的宽度

5. 案例——根据页面宽度改变背景颜色

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

注意：为了防止混乱，媒体查询的数值从小到大来写，这样代码更简洁

因为后面会覆盖前面的冲突部分，数字后面必须跟单位，px不可省略

媒体查询+rem实现元素动态大小变化

rem单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸

媒体查询可以根据不同设备宽度来修改样式

媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

引入资源（理解）

当样式比较繁多的时候，可以针对不同的媒体使用不同stylesheets

引入资源就是针对于不同的屏幕尺寸调用不同的css文件（从小到大写，可覆盖），即直接在<link>中判断设备的尺寸，然后引用不同的css文件

1. 语法规范

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

2. 示例

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

Less基础

1. 维护CSS的弊端

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

CSS冗余度比较高
不方便维护及扩展，不利于复用
CSS没有很好的计算能力

2. Less介绍

Less（Leaner Style Sheets）的缩写，是一门CSS扩展语言，也称为CSS预处理器

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

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

常见的CSS预处理器：Sass、Less、Stylus

总结：Less是一门CSS预处理语言，它扩展了CSS的动态特性

3. Less安装

安装nodejs，下载LTS稳定版本，网址：https://nodejs.org/en/download/
检查是否安装成功，使用cmd命令（win10是window + r打开，运行输入cmd）——输入"node -v"查看版本即可
基于node.js在线安装Less，使用cmd命令"npm install -g less"即可
检查是否安装成功，使用cmd命令"lessc -v"查看版本即可

4. Less使用

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

Less变量、Less编译、Less嵌套、Less运算

5. Less变量

语法：@变量名: 值;

变量命名规范：必须有@为前缀、不能包含特殊符号、不能以数字开头、大小写敏感

使用规范：body {color: @color;}

6. Less编译

Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终通过解析器编译成对应的CSS文件

nodejs方法：在当前文件夹，使用cmd命令“lessc style.less > style.css”

vscode插件：Easy LESS插件（只要保存一下Less文件，会自动生成CSS文件）

7. Less嵌套

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

.header {
    width: 200px;
	.logo {
		width: 100px;
	}
}

如果遇见交集 / 伪类 / 伪元素选择器，内层选择器的前面需要加&符号，被解析为父元素自身或父元素的伪类（若没有&符号，会被解析为父选择器的后代）

a{
	&.box {
		color: red;
	}
	&:hover {
		color: blue;
	}
}

8. Less运算

任何数字、颜色或者变量都可以参与运算，Less提供了+ - * / 算术运算

@width: 10px + 5;
div {
	width: (@width + 5) * 2;
    height: (300px / 50);
	border: @width solid red;
    background-color: #999 - #333;
}

注意事项：

less运算符左右必须加空格隔开
两个数参与运算，如果只有一个数有单位，则最后结果就以这个单位为准
两个数参与运算，如果两个数都有单位，而且不一样的单位，最后结果以第一个单位为准

rem适配方案

1. 适配的目标

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

2. 如何达到适配的目的

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

3. rem实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）
CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

4. rem适配方案技术使用（市场主流）

less + 媒体查询 + rem
flexible.js + rem（推荐，更简单）

rem + 媒体查询 + less

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

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

假设设计稿是750px
假设把整个屏幕划分为15等份（划分标准不一，可以是20份，也可以是10等份）
每一份作为html字体大小，这里就是50px
那么在320px设备时，字体大小为320 / 15 = 21.33px
用页面元素的大小除以不同的html字体大小会发现它们比例还是相同的

比如以750为标准设计稿

一个100*100px的页面元素在750屏幕下，就是100 / 50，转换为rem是2rem*2rem，比例是1：1
在320屏幕下，html字体大小为21.33，则2rem = 42.66px，此时宽高都是42.66，宽高比例还是1：1
已经能实现不同屏幕下页面元素盒子等比例缩放的效果

2. 元素大小取值方法

最后的公式：页面元素的rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
屏幕宽度 / 划分的份数 = html font-size的大小
即：页面元素的rem值 = 页面元素值(px) / html font-size的大小

苏宁移动端首页m.suning.com

1. 搭建相关文件夹结构

2. 设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width,user-scalable=no,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css" />

3. 设置公共common.less文件

设置最常见的屏幕尺寸，利用媒体查询设置不同屏幕中的html字体大小（除了首页其他页面也需要）
用一个变量定义划分的等份
因为pc端也可以打开苏宁移动端首页，所以默认html字体大小为50px，注意要写到最上方

//定义份数变量
@no: 15;
html {
  font-size: 50px;
}
// 根据媒体查询 设置不同屏幕中的html的字号
@media screen and (min-width: 320px) {
  html {
    font-size: (320px / @no);
  }
}

4. 新建index.less文件

在index.less中导入common.less文件

@import "common";
生成index.css引入到index.html中

5. 在index.less中书写body样式

// 根据实际开发情况而定
body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, STHeiTi sans-serif;
  background: #f2f2f2;
}