响应式数据大屏开发rem、%、vh/vm

前言响应式数据大屏开发rem、%、vh/vm

我们在开发数据大屏的时候难免会需要解决响应式问题，那么响应式是什么呢？

响应式：响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化
通俗的来说：
自适应：元素随着屏幕发生宽高大小变化

在这里插入图片描述

有哪些响应式的技术？

1.媒体查询：@media screen and
2.百分比布局：%
3.vh/vm布局：100vh/vm
4.rem布局：根据根元素的font-size大小变化
5.flex布局：display：flex

实战：

媒体查询

什么是媒体查询？
媒体查询就是对不同分辨率的屏幕编写不同的css样式来达到适配的目的
也就是在不同分辨率的区间写上不同的样式，不需要改变的样式可以写在外面变成公共样式

媒体查询有哪些属性呢？

only：限定某种设备。
screen：彩色电脑屏幕，是媒体类型里的一种。
and：关键字，连接多个表达式。
not：关键字，排除不支持的媒体类型。
max-width 是目标显示区域的宽度，例如，浏览器宽度。
max-device-width 是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
device-aspect-ratio 可以适配特定屏幕长宽比的设备，设备屏幕长宽比为4:3、16:9
上代码：

这里我们要兼容多个尺寸大小的屏幕所以用 and

        .div{background-color: #fff;}@media screen and (max-width:800px) {/* 屏幕尺寸小于等于700时下面的样式执行 */.div{background-color: red;}}@media screen and (max-width:700px) {.div{background-color: bule;}.head{display:flex;}}@media screen and (min-width:300px) and (max-width:500px) {.div{background-color: green;}.head{display:nonoe;}}

百分比布局

百分比布局就是把需要用到尺寸的都用百分比
亿点小知识：百分比是继承父级的大小的百分比

* {margin: 0;padding: 0;
}
body {width: 1000px;height: 800px;
}
div{width:100%; // 等于父级的 1000pxheight:100%;// 等于父级的 800px
}

vh/vm布局

是根据屏幕的尺寸作为单位：
vm就是屏幕宽的尺寸、 vh就是屏幕高的尺寸

body {width: 100vm; // 屏幕宽一样宽height: 50vh;// 屏幕的高的一半
}

rem布局

rem 根据根元素的font-size大小作为单位
例如：根元素的font-size是 16px 那么 1rem = 16px

var documentElement = document.documentElement;
function callback() {var clientWidth = documentElement.clientWidth;// 屏幕宽度大于780，不在放大clientWidth = clientWidth < 780 ? clientWidth : 780;documentElement.style.fontSize = clientWidth / 10 + 'px';
}

第二种下载插件：使用pxtorem 实现rem布局
1.安装postcss-pxtorem --save

npm i postcss-pxtorem --save

2.在项目根目录创建postcss.config.js文件

module.exports = {plugins: {'postcss-pxtorem': {//根元素字体大小rootValue: 16,//匹配CSS中的属性，* 代表启用所有属性propList: ['*'],//转换成rem后保留的小数点位数unitPrecision: 5,//小于12px的样式不被替换成remminPixelValue: 3,//忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架exclude: ['node_modules']}}
}

3.创建resize.js并使用

function resizeRem() {const scale = document.documentElement.clientWidth / 1920document.documentElement.style.fontSize = 16* scale + 'px'
}
resizeRem()
window.onresize = function () {resizeRem()
}