响应式的几种解决方案——媒体查询、flex、grid、多列布局、瀑布流和数据可视化屏幕的缩放处理

server/2024/10/22 18:29:35/

@media媒体查询

媒体查询入门指南

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@media screen and (max-width: 400px) {.container {width: 300px;height: 300px;border: 1px solid aqua;}}@media screen and (min-width: 500px) and (max-width: 700px) {.container {width: 500px;height: 500px;border: 1px solid rgb(30, 193, 65);}}img {width: 100%;height: 100%;object-fit: contain;}</style></head><body><div class="container"><img src="./yinghua.jpg" /></div><script>let textDom = document.createElement("div");let wid = window.innerWidth;textDom.textContent = "现在的屏幕宽度是：" + wid + "px";document.body.appendChild(textDom);window.addEventListener("resize", function () {wid = window.innerWidth;textDom.textContent = "现在的屏幕宽度是：" + wid + "px";});</script></body>
</html>

在这里插入图片描述

媒体查询就是根据不同的屏幕大小编写一套对应的css。

在bootstrap的源码中，可以看到非常多的媒体查询使用

在这里插入图片描述

js实现响应式

监听resize事件，根据屏幕宽度设置css，比如：

<template><div :style="{ width: innerW < 500 ? '400px' : '500px' }" class="inner-box"></div>
</template><script setup>
const innerW = ref(window.innerWidth);
const onResize = (e) => {innerW.value = window.innerWidth;
};
onMounted(() => {window.addEventListener("resize", onResize);
});
onBeforeUnmount(() => {window.removeEventListener("resize", onResize);
})
</script><style scoped lang="less">
.inner-box {height: 200px;background-color: aqua;
}
</style>

meta标签

 <!-- 对移动设备开启响应式 --><meta name="viewport" content="width=device-width, initial-scale=1.0" />

MDN原文：

name

name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。

content

此属性包含 http-equiv 或 name 属性的值，具体取决于所使用的值。

作用：控制视口的尺寸和缩放。width=device-width 设置视口宽度为设备的宽度，initial-scale=1.0 设置初始缩放比例为 1。

flex和组件库Row/Col栅格的响应式

Element-plus、iView、Ant-Design-Vue等组件库都会有Grid栅格这一栏，右侧分类有响应式布局

在这里插入图片描述

在AntDV的栅格一栏，F12查看元素设置，其利用的了@media媒体查询和flex缩放

响应式布局

参照 Bootstrap 的 响应式设计，预设六个响应尺寸：xs sm md lg xl xxl。

在这里插入图片描述

bootstrap中文网-布局-栅格

关于flex: 0 0 25%;

MDN-flex

flex: 0 0 25% 是 flex 布局中的一种简写属性，分别设置了 flex-grow、flex-shrink 和 flex-basis。下面解释各个部分的含义：

1. flex-grow（元素的放大比例）

  • 含义：当容器中有剩余空间时，flex-grow 定义了项目如何分配这个剩余空间。

  • 取值

    ：可以是任何非负数（0、1、2 等）。

    • 0：表示项目不放大，容器中有剩余空间时，元素不会变大。
    • 1：表示元素按比例分配剩余空间。如果多个元素的 flex-grow 值为 1，它们会平等地分配容器中的剩余空间。如果一个元素的 flex-grow 为 2，另一个为 1，则前者分配的剩余空间是后者的两倍。

2. flex-shrink（元素的缩小比例）

  • 含义：当容器空间不足时，flex-shrink 决定了项目如何缩小以适应容器的尺寸。

  • 取值

    ：可以是任何非负数。

    • 0：元素不会缩小，超出容器部分可能会溢出。
    • 1：元素按比例缩小。当容器空间不足时，flex-shrink 为 1 的元素将按比例缩小。如果有两个元素，一个 flex-shrink 为 2，另一个为 1，则前者缩小得更多。

3. flex-basis（元素的初始大小）

  • 含义：指定了元素的初始大小（可以是长度、百分比等）。这决定了元素在分配空间之前的基础宽度或高度（取决于 flex-direction）。
  • 取值：可以是具体的尺寸（如 px、% 等）或 auto。
    • auto：元素的初始大小是内容的大小或根据宽度/高度属性来确定。
    • 具体值（如 25%、100px）：明确设置元素的初始大小，容器的剩余空间将在分配之前根据这个大小计算。

注意：

  • 默认值是 0 1 auto，即默认不放大，允许缩小，初始大小由内容决定。

  • flex: 1 1 auto; 自动放大、缩小，宽度由内容决定

  • flex: 100px;实际为flex: 1 1 100px

  • 当两个兄弟元素设置为：

          .box-1 {flex: 200px;}.box-2 {flex: 100px;}

    那么两个元素的宽度差始终为：200px - 100px = 100px，

    如果是百分比，宽度差为则为：（20% - 10%）* 父元素宽度

栅格布局

阮一峰 CSS Grid 网格布局教程

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

自动填充方案

display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px 1fr));

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

grid+media
@media (max-width: 400px) {.box {grid-template-columns: 1fr 1fr;}
}

多列布局

MDN-多列布局

column-count: 3;
column-gap: 10px;
column-width: 100px;

和栅格布局很相似，但是栅格布局能够更精确的控制行列

瀑布流布局

column多列布局实现：

    <style>.box {column-count: 3;column-gap: 10px;}img {width: 100%;}@media (min-width: 768px) {.box {column-count: 4;}}</style><div class="box"><img src="./yinghua.jpg" alt="" /><img src="./tianye.jpg" alt="" /><img src="./green.jpg" alt="" /><img src="./green.jpg" alt="" /><img src="./1.jpg" alt="" /><img src="./2.jpg" alt="" /><img src="./3.jpg" alt="" /><img src="./4.jpg" alt="" /><img src="./5.jpg" alt="" /><img src="./6.jpg" alt="" /></div>

grid栅格布局实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Masonry Layout</title><style>.grid-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 动态列宽 */grid-gap: 20px; /* 网格间距 */grid-auto-rows: 10px; /* 定义自动行高的小单位 */}.grid-item {background-color: lightblue;border: 1px solid #ccc;padding: 10px;font-size: 16px;line-height: 1.5;}/* 通过行跨度实现不同高度的效果 */.grid-item:nth-child(odd) {grid-row: span 20; /* 偶数项跨越更多行 */}.grid-item:nth-child(even) {grid-row: span 10; /* 奇数项跨越较少行 */}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class="grid-item">2. Proin ac orci eu erat volutpat aliquam.</div><div class="grid-item">3. Integer feugiat diam nec metus cursus, et sagittis mauris laoreet.</div><div class="grid-item">4. Nulla facilisi.</div><div class="grid-item">5. Donec sollicitudin.</div><div class="grid-item">6. Maecenas scelerisque.</div><div class="grid-item">7. Vestibulum et justo sit amet est auctor hendrerit.</div><div class="grid-item">8. Integer feugiat diam nec metus cursus.</div></div>
</body>
</html>

栅格布局的第二种实现：

注意：masonry目前只在火狐浏览器支持

.box {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;grid-template-rows:masonry;
}
img {width: 100%;display: block;
}

图片的响应式方案

除了上述几种方案，图片还独特的方式。

  • img标签

        <imgsrc="./yinghua.jpg"srcset="./tianye.jpg 1000w, ./green.jpg 800w"sizes="(max-width: 400px) 200px, (max-width: 500px) 300px"/>
    • 其中800w意义张图片的宽度是 800 像素。

  • picture标签

    <picture><source media="(max-width: 400px)" srcset="./tianye.jpg"></scource><source media="(max-width: 600px)" srcset="./green.jpg"></scource><img src="./yinghua.jpg" /></picture>

其实这两种实现方案也是“媒体查询“，只不过换了一种写法

字体的响应式方案和特殊的单位

根据实际情况，采用媒体查询和rem、vw等方式实现

  • font-size: 3rem
  • font-size: 4vw
    • 为了不让字体在屏幕较窄的情况下变的特别小，可以改进为：font-size: calc(2rem + 4vw)

rem：相对于根元素（<html>）的字体大小，即**html 元素的 font-size**。它不会受到父元素字体大小的影响。默认情况下，浏览器的根元素字体大小通常是 16px，但你可以修改。

html {font-size: 16px;
}.child {font-size: 2rem; /* 2rem = 2 * 16px = 32px */
}

数据可视化中的zoom缩放

获取地址栏中的z这个参数，以此改变缩放方式

/*** 获取地址栏参数* @param {*} name* @returns*/
export const getUrlKey = (name) => {return (decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null)
}
/** 缩放屏幕 */
export const zoom = () => {let k = getZoom()if (getUrlKey('z')) {document.body.style.transform = `scale(${k[0]},${k[1]})`} else {let z1 = Math.min(...k)document.body.style.transform = `scale(${z1})`}
}
/*** 获取缩放比例* @returns {number}*/
function getZoom() {const [W, H] = [window.innerWidth, window.innerHeight]const realk = W / Hlet k1, k2k1 = H / config.sHeightk2 = W / config.sWidthreturn [k2, k1]
}

app.vue

            window.addEventListener('resize', () => {zoom()})

.less

@zoom: true; // 定义一个布尔变量，用来控制不同的响应布局模式
@sWidth: 1920; // 设计稿的宽度，单位是px
@sHeight: 1080; // 设计稿的高度，单位是px
@remHeight: @sHeight*100/@sWidth; // 通过宽高比例计算出rem单位下的高度// 定义一个mixin函数 .fontRoot，根据传入的 @a 值切换字体大小设置
.fontRoot (@a) when (@a = true) {font-size: unit((@sWidth/100),px); // 当 @a = true 时，设置字体大小为设计稿宽度的 1/100
}.fontRoot (@a) when (@a = false) {font-size: 1vw; // 当 @a = false 时，字体大小设置为视口宽度的1%
}// 定义一个mixin函数 .wandh，根据传入的 @a 值切换宽高设置
.wandh (@a) when (@a = true) {width: ~"@{sWidth}px"; // 当 @a = true 时，设置宽度为设计稿宽度height: ~"@{sHeight}px"; // 设置高度为设计稿高度
}.wandh (@a) when (@a = false) {width: 100rem; // 当 @a = false 时，设置宽度为 100rem，适应不同分辨率height: ~"@{remHeight}rem"; // 高度通过 rem 值计算，保持设计稿比例
}* {margin: 0;padding: 0;box-sizing: border-box;
}html {width: 100vw; // 设置html宽度为视口宽度height: 100vh; // 设置html高度为视口高度.fontRoot(@zoom); // 根据 @zoom 的值调用 .fontRoot 函数来设置字体大小background-color: rgb(0, 0, 0); // 背景色为黑色
}body {display: flex; // 使用flex布局position: relative;overflow-y: hidden; // 隐藏竖向滚动条overflow-x: hidden; // 隐藏横向滚动条width: 100%; // body的宽度设置为 100%height: 100%; // body的高度设置为 100%user-select: none; // 禁止文本选择background-color: rgb(0, 0, 0) !important; // 强制设置背景色为黑色align-items: center; // 垂直方向居中justify-content: center; // 水平方向居中color: white; // 文本颜色为白色
}#app {margin: 0 auto; // 水平居中.wandh(@zoom); // 根据 @zoom 的值调用 .wandh 函数来设置宽高
}.router-main-box {position: relative; // 位置相对定位.wandh(@zoom); // 根据 @zoom 的值调用 .wandh 函数来设置宽高
}

http://www.ppmy.cn/server/122438.html

相关文章

前端中CSS选择器权重的问题

前端中CSS选择器权重的问题

前言 前端中很重要的CSS&#xff0c;使得网页更加丰满美丽&#xff0c;我们使用CSS时&#xff0c;必不可少的需要使用选择器&#xff0c;选择器也分为简单选择器和复合选择器。而在给选择器中填充内容时&#xff0c;有时候会有一些命令重复&#xff0c;会涉及到优先级的问题&a…
阅读更多...
杭州算力小镇：AI泛化解锁新机遇，探寻AI Agent 迭代新路径

杭州算力小镇：AI泛化解锁新机遇，探寻AI Agent 迭代新路径

人工智能技术不断迭代&#xff0c;重点围绕着两个事情&#xff0c;一是数据&#xff0c;二是算力。 算法的迭代推动着AI朝向多模态的方向发展&#xff0c;使之能够灵活应对不同领域的不同任务&#xff0c;模型的任务执行能力大大提升&#xff0c;人工智能泛化能力被推上高潮。…
阅读更多...
如何使用Flux+lora进行AI模型文字生成图片

如何使用Flux+lora进行AI模型文字生成图片

目录 概要 前期准备 部署安装与运行 1. 部署ComfyUI 本篇的模型部署是在ComfyUI的基础上进行&#xff0c;如果没有部署过ComfyUI&#xff0c;请按照下面流程先进行部署&#xff0c;如已安装请跳过该步&#xff1a; &#xff08;1&#xff09;使用命令克隆 ComfyUI &…
阅读更多...
【JAVA高级】 redis分布式双重加锁（业务校验：防止接口并发调用时数据重复）

【JAVA高级】 redis分布式双重加锁（业务校验：防止接口并发调用时数据重复）

文章目录 此问题的考虑思路使用Redis的key-value锁的基本思路结合Redis数据结构实现避免重复注意事项实现代码只避免 name和age的重复避免 name和age的和age和sex重复&#xff1a;使用双重的分布式锁实现&#xff1a; 背景&#xff1a;在日常开发过程中&#xff0c;遇到了一个需…
阅读更多...
【高阶数据结构】二叉搜索树的插入、删除和查找(精美图解+完整代码)

【高阶数据结构】二叉搜索树的插入、删除和查找(精美图解+完整代码)

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《高阶数据结构》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多《高阶数据结构》点击专栏链接查看&a…
阅读更多...
haproxy程序崩溃问题处理

haproxy程序崩溃问题处理

背景&#xff1a; 线上一k8s环境告警出节点失联&#xff0c;通过排查和k8s的api建立链接失败&#xff0c;检查发现haproxy出现了重启&#xff0c;对应的日志显示出程序运行崩溃&#xff0c;这个情况根据日志追溯&#xff0c;发现曾多次崩溃&#xff0c;后续也在其他k8s环境也有…
阅读更多...
2024年Oceanbase考试认证的习题以及注意事项

2024年Oceanbase考试认证的习题以及注意事项

OceanBase认证-OceanBase证书-数据库认证证书-OceanBasehttps://www.oceanbase.com/training考试认证在上边链接点击立即认证&#xff0c;进去以后就有学习资料和课程 此时需要注意的是不能只看视频不看资料&#xff0c;因为考试的时候有考的不是视频里面的内容&#xff0c;资料…
阅读更多...
网络安全：构建数字世界的坚实防线

网络安全：构建数字世界的坚实防线

文章目录 网络安全&#xff1a;构建数字世界的坚实防线一、网络安全的重要性1. 保护个人隐私2. 维护商业利益3. 保障国家安全4. 防止经济犯罪5. 确保业务连续性 二、网络安全现状1. 数据泄露频发2. 隐私保护堪忧3. 网络犯罪猖獗 三、网络安全防范措施1. 密码管理2. 个人信息保护…
阅读更多...
最新文章

Copyright @ 2022~2023