响应式数据大屏开发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%; // 等于父级的 1000px
	height: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的样式不被替换成rem
            minPixelValue: 3,
             //忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
            exclude: ['node_modules']
        }
    }
}

3.创建resize.js并使用

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