前言 响应式数据大屏开发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()
}
以上就是响应式数据大屏开发感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞
收藏谢谢~!
关注收藏博客 作者会持续更新…
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net