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

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

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

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

响应式数据大屏开发rem、%、vh/vm_第1张图片

有哪些响应式的技术?

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()
}

响应式数据大屏开发rem、%、vh/vm_第2张图片
以上就是响应式数据大屏开发感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~!
关注收藏博客 作者会持续更新…

你可能感兴趣的:(javascript,前端框架,html)