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

news2024/9/23 17:37:45

@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标签

        <img
      src="./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 / H
    let k1, k2
    k1 = H / config.sHeight
    k2 = W / config.sWidth
    return [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.coloradmin.cn/o/2158093.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java面试篇基础部分- Java中的阻塞队列

Java面试篇基础部分- Java中的阻塞队列

首先队列是一种前进后出的操作结构，也就是说它只允许从队列前端进入，从队列后端退出。这个前端和后端看个人如何理解，也就是通常所说的入队和出队，队头和队尾。 阻塞队列和一般队列的不同就在于阻塞队列是可以阻塞的，这里所说的并不是说队列中间或者队头队尾被拦截了，而是…
阅读更多...
HTML与JavaScript结合实现简易计算器

HTML与JavaScript结合实现简易计算器

目录 背景&#xff1a; 过程&#xff1a; 代码: HTML部分解析&#xff1a; body部分解析&#xff1a; JavaScript部分解析&#xff1a; 效果图 &#xff1a; 总结: 背景&#xff1a; 计算器是一个典型的HTML和javaScript结合使用的例子&#xff0c;它展示了如何使用H…
阅读更多...
Kibana中突然看不到日志ElasticSearch突然采集不到日志问题解决分析

Kibana中突然看不到日志ElasticSearch突然采集不到日志问题解决分析

问题原因 起因之前我们项目是采用elk&#xff08;elasticsearchlogstashkibana&#xff09;的方式下部署日志采集系统&#xff0c;今天突然发现Kibana中所有项目日志都没打印&#xff0c;更奇怪的是线上的项目都正常运行&#xff0c;并无异常&#xff0c;这时让人陷入了深思&a…
阅读更多...
电商新纪元：37即拼模式如何重塑市场格局

电商新纪元：37即拼模式如何重塑市场格局

在电商领域的浩瀚星海中&#xff0c;拼团模式犹如一颗璀璨的星辰&#xff0c;历经近十年的洗礼&#xff0c;依旧熠熠生辉&#xff0c;不断吸引着商家与消费者的目光。近期&#xff0c;一家电商平台凭借其独树一帜的“37即拼”模式&#xff0c;仅在一周内便狂揽5万订单&#xff…
阅读更多...
移动硬盘未格式化：深度解析、恢复策略与预防措施

移动硬盘未格式化：深度解析、恢复策略与预防措施

现象解读&#xff1a;移动硬盘的“未格式化”迷局 在数字信息爆炸的时代&#xff0c;移动硬盘作为数据存储与传输的重要工具&#xff0c;扮演着不可或缺的角色。然而&#xff0c;当用户试图访问移动硬盘时&#xff0c;却可能遭遇一个令人困惑的提示——“未格式化”。这一现象…
阅读更多...
一大堆的图片怎么批量重命名从1到50？这个方法你必须知道

一大堆的图片怎么批量重命名从1到50？这个方法你必须知道

一大堆的图片怎么批量重命名从1到50&#xff1f;这个方法你必须知道。有许多的人因为工作的问题&#xff0c;经常需要用到给一些图片&#xff0c;文件&#xff0c;文档等重命名的事情。很多人都不知道有快速处理的办法&#xff0c;只能一个个右键重命名&#xff0c;或者批量选择…
阅读更多...
Three.js 3D人物漫游项目（下）

Three.js 3D人物漫游项目（下）

本文目录 前言最终效果1、效果回顾2、编写人物模型动画执行类并调用2.1 代码2.2 代码解读2.3 实例化动画类并调用2.4 效果2.4.1 休息动画2.4.2 跑步动画2.4.3 走路动画2.4.4 舞蹈1动画2.4.5 舞蹈2动画3、键盘控制动画3.1 站立休息、走、跑、舞蹈1、舞蹈2代码3.1.1 效果3.2 跳跃…
阅读更多...
1000Km弹射巡飞器技术详解

1000Km弹射巡飞器技术详解

随着现代战争形态的演变及科技水平的飞速提升&#xff0c;远程侦察、打击与持久监视能力成为各国军事力量建设的重要方向。1000Km弹射巡飞器作为一种新型无人机系统&#xff0c;凭借其超远的航程、长时间的续航以及高度的灵活性&#xff0c;成为近年来军事技术领域的研究热点。…
阅读更多...
开源ids snort （windows版）

开源ids snort （windows版）

Snort-IPS-on-Windows-main资源-CSDN文库 GitHub - eldoktor1/Snort-IPS-on-Windows: A comprehensive guide to installing and configuring Snort IPS on Windows, ensuring robust network security 手动打造Snortbarnyard2BASE可视化告警平台 - FreeBuf网络安全行业门户 …
阅读更多...
记录｜项目管理软件PingCode使用【待更新】

记录｜项目管理软件PingCode使用【待更新】

目录 前言一、项目的创建二、需求2.1 需求页面认识 2.2 添加需求更新时间 前言 参考视频&#xff1a; 快速上手PingCode&#xff1a;创建Scrum、看板、瀑布项目 这个主要用于细化自己和队友、团队之间的任务&#xff0c;进一步管理整个的软件开发的进度。【如下图】 一、项目的…
阅读更多...
Python可迭代对象(2)

Python可迭代对象(2)

目录 3。字典 字典的构造 字典的添加和修改 字典推导式的使用 以上全部代码编译结果展示 字典复习 4。集合(set) 集合的创建 集合的运算 集合的添加和删除元素 以上全部代码的编译结果 序列解包&#xff08;Sequence unpacking&#xff09; 3。字典 字典的构造 #字…
阅读更多...
ChatGLM-6B 部署与使用——打造你的专属GLM

ChatGLM-6B 部署与使用——打造你的专属GLM

ChatGLM-6B 部署与使用指南 ChatGLM-6B 是清华大学与智谱 AI 开源的一款对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;参数达到 62 亿&#xff0c;因其卓越的语言理解与生成能力&#xff0c;受到广泛关注。 一、在 DAMODEL 上部署 ChatGLM-6B…
阅读更多...
AD层次化设计中的常见错误

AD层次化设计中的常见错误

Duplicate Net Names Wire 仔细检查是不是网络标签没有标上 网络标签是否一致 Nets Wire has multiple names 上面的步骤也要检查 然后设置如下&#xff1a;
阅读更多...
基于丹摩智算平台-手把手拿下经典目标检测模型 Faster-Rcnn

基于丹摩智算平台-手把手拿下经典目标检测模型 Faster-Rcnn

文章目录 1. 前言1. 1 丹摩智算平台1.2 经典目标检测模型 Faster-Rcnn 2. 前置准备2.1 WindTerm&#xff08;远程连接服务器&#xff09;2.2 项目源码 3. 服务器平台配置3.1 创建实例3.2 远程链接 4. Faster-rcnn 的环境配置4.1 上传文件&#xff0c;解压4.2 安装所需环境 5. 数…
阅读更多...
在Windows系统上安装的 zstd C++ 库

在Windows系统上安装的 zstd C++ 库

在Windows系统上安装的 zstd C 库 项目地址:安装步骤步骤一步骤二 效果 项目地址: https://github.com/facebook/zstd 经过观察发现,这个项目没有CMakeLists.txt,只有Makefile,但是Makefile在windows系统下没有什么用, 所以说,常规的方式安装不可取了 安装步骤 步骤一 往下…
阅读更多...
idea上使用tomcat运行web项目

idea上使用tomcat运行web项目

idea上使用tomcat运行web项目 首先需要安装tomcat&#xff0c;可以查看我上一篇文章 如果你已经配置tomcat&#xff0c;这里不需要改动。如果未配置&#xff0c;需要在这里选择你tomcat目录 修改下面的上下文&#xff0c;也就是网页上访问时http://localhost:8080/后面拼…
阅读更多...
算数运算之短路

算数运算之短路

c语言的表达式是从左往右求值的&#xff0c;我们在面对&&&#xff08;按位与&#xff09;和||&#xff08;按位或&#xff09;我们要根据与还有或的特性在判断是否能够使句子能够运行下去&#xff0c;就举个简单的例子 if(month 12 || month1 || month 2) { printf…
阅读更多...
LeetCode 2374.边积分最高的节点：模拟

LeetCode 2374.边积分最高的节点：模拟

【LetMeFly】2374.边积分最高的节点&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/node-with-highest-edge-score/ 给你一个有向图&#xff0c;图中有 n 个节点&#xff0c;节点编号从 0 到 n - 1 &#xff0c;其中每个节点都 恰有一条 出边。 图…
阅读更多...
英伟达开源 NVLM 1.0 引领多模态 AI 变革

英伟达开源 NVLM 1.0 引领多模态 AI 变革

新闻 NVLM 1.0 是由英伟达&#xff08;Nvidia&#xff09;最新推出的一系列前沿级别的多模态大型语言模型&#xff08;MLLM&#xff09;&#xff0c;这些模型在视觉-语言任务上取得了与领先专有模型&#xff08;例如 GPT-4o&#xff09;和开放访问模型&#xff08;例如 Llama 3…
阅读更多...
[干货] [非基础警告] Unity 发布-订阅模式下的事件中心设计

[干货] [非基础警告] Unity 发布-订阅模式下的事件中心设计

本文师承于唐老师&#xff0c;但是修改了一些代码&#xff0c;采用更加方便理解的方式设计 1.什么是事件中心 2.可以比喻成冒险者工会的任务板子 任务板子上面有发布任务和任务完成两种基础情况 2.1 发布任务 来个冒险者发布一个任务&#xff0c;就执行Pulishtask方法 这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023