前言 响应式数据大屏开发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() }
以上就是响应式数据大屏开发感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
