当前位置：首页 > news >正文

【CSS】什么是响应式设计？响应式设计的基本原理，怎么做

news 来源：原创 2025/5/15 3:57:33

在当今多设备、多屏幕尺寸的时代，网页设计面临着前所未有的挑战。传统的固定布局已无法满足用户在不同设备上浏览网页的需求，响应式设计（Responsive Web Design）应运而生，成为网页设计的趋势和标准。本文将深入探讨响应式设计的概念、基本原理以及实现方法。

一、什么是响应式设计？

响应式网站设计是一种灵活且适应性强的网页设计方法，其核心理念是：

“内容如水，适配容器”

换句话说，网页内容会根据用户行为以及设备环境（如系统平台、屏幕尺寸、屏幕方向等）进行动态调整和适配，以提供最佳的用户体验。

响应式网站的特点：

多设备兼容：无论是PC、平板电脑还是智能手机，响应式网站都能提供良好的显示效果。
灵活的布局：导航栏、按钮、图片等元素会根据屏幕尺寸自动调整大小和位置。例如，在移动设备上，传统的顶部导航栏可能会转换为“汉堡菜单”（抽屉式导航）。
内容自适应：文字大小、图片尺寸等会根据屏幕尺寸进行缩放，确保用户无需缩放或滚动即可轻松阅读内容。

二、响应式设计的基本原理

响应式设计主要依赖于以下几种技术手段来实现其灵活性：

1. 媒体查询（Media Queries）

媒体查询是实现响应式设计的关键技术，它允许开发者针对不同的设备特性（如屏幕宽度、高度、分辨率等）应用不同的CSS样式。

语法示例：

@media screen and (max-width: 600px) {body {font-size: 16px;}
}

上述代码表示当视口宽度小于或等于600px时，网页的字体大小将设置为16px。

常见的媒体查询类型：

屏幕宽度：针对不同宽度的设备应用不同的样式。
设备方向：针对横屏和竖屏方向应用不同的样式。
分辨率：针对高分辨率设备（如视网膜屏）应用更高质量的图片或样式。

2. 相对单位

使用相对单位（如百分比、vw/vh、rem等）代替固定的像素单位，可以使网页元素根据视口大小或父元素尺寸进行缩放。

百分比（%）：宽度、高度、边距等属性可以使用百分比单位，使元素根据父元素尺寸进行缩放。
视口单位（vw/vh）：1vw等于视口宽度的1%，1vh等于视口高度的1%，适用于根据视口大小进行布局。
rem：相对于根元素（html）的字体大小进行缩放，常用于字体大小设置。

3. 弹性布局（Flexbox）和网格布局（Grid）

这两种CSS布局模块提供了强大的布局能力，可以轻松实现复杂的响应式布局。

Flexbox：适用于一维布局（如水平或垂直方向上的元素排列），可以轻松实现元素的对齐、分布和换行。
Grid：适用于二维布局，可以同时处理行和列，擅长将页面划分为多个区域，并定义这些区域的大小、位置和层次关系。

三、如何实现响应式设计？

1. 设置视口（Viewport）

在HTML的<head>部分添加以下meta标签，以确保网页在移动设备上正确缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

属性解释：

width=device-width：设置视口宽度为设备宽度。
initial-scale=1：设置初始缩放比例为1。
maximum-scale=1：设置最大缩放比例为1。
user-scalable=no：禁止用户缩放。

2. 使用媒体查询

根据不同的屏幕尺寸应用不同的CSS样式。例如：

/* 默认样式 */
.container {width: 100%;padding: 20px;
}/* 当视口宽度大于768px时 */
@media screen and (min-width: 768px) {.container {width: 750px;padding: 30px;}
}/* 当视口宽度大于1200px时 */
@media screen and (min-width: 1200px) {.container {width: 1170px;padding: 40px;}
}

3. 采用弹性布局或网格布局

使用Flexbox实现两栏布局（右侧自适应）：

<div class="container"><div class="sidebar">侧边栏</div><div class="main">主要内容</div>
</div>

.container {display: flex;
}.sidebar {width: 200px;background-color: #f0f0f0;
}.main {flex: 1;background-color: #ffffff;
}

使用Grid实现三栏布局（中间自适应）：

<div class="container"><div class="left">左侧栏</div><div class="middle">中间内容</div><div class="right">右侧栏</div>
</div>

.container {display: grid;grid-template-columns: 200px 1fr 200px;
}.left {background-color: #f0f0f0;
}.middle {background-color: #ffffff;
}.right {background-color: #f0f0f0;
}

4. 使用CSS预处理器

CSS预处理器（如Sass、Less、Stylus）可以提高CSS代码的可维护性和可复用性。例如，使用变量、混合（mixins）和嵌套规则，可以更方便地管理响应式样式。

示例（使用Sass）：

$breakpoint-mobile: 600px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1200px;.container {width: 100%;padding: 20px;@media screen and (min-width: $breakpoint-tablet) {width: 750px;padding: 30px;}@media screen and (min-width: $breakpoint-desktop) {width: 1170px;padding: 40px;}
}

四、响应式设计的优点与缺点

优点：

用户体验更佳：网页内容能够根据不同设备进行适配，用户无需缩放或滚动即可轻松浏览。
维护成本低：只需维护一份代码库，无需为不同设备编写不同的版本。
SEO友好：响应式网站在搜索引擎排名中更具优势，因为Google等搜索引擎更青睐移动友好的网站。

缺点：

开发复杂度高：需要掌握媒体查询、弹性布局、网格布局等新技术，对开发者的技能要求较高。
性能问题：复杂的响应式设计可能会导致CSS文件体积增大，影响页面加载速度。
设计局限性：某些设计元素在极端屏幕尺寸下可能无法完美呈现，需要进行权衡和调整。

五、总结

响应式设计是现代网页设计中不可或缺的一部分，它能够有效提升网站在不同设备上的用户体验。随着移动互联网的迅猛发展，掌握响应式设计技术已成为前端开发者的必备技能。

通过合理运用媒体查询、相对单位、弹性布局和网格布局等手段，开发者可以创建出既美观又实用的响应式网站，为用户提供无缝的浏览体验。

希望本文能够帮助你深入理解响应式设计的概念和实现方法，并将其应用到实际项目中，打造出更具吸引力和竞争力的网页。

其他：如何将 px 转换为 rem？

方法一：手动计算

步骤：

确定根元素字体大小：
- 默认情况下，根元素字体大小为 16px。
- 为了简化计算，通常将根元素字体大小设置为 10px（即 62.5%），这样 1rem = 10px。
进行转换：
- 将设计稿中的像素值除以根元素字体大小（10px）即可得到对应的 rem 值。

示例：

假设根元素字体大小设置为 62.5%（即 10px），要将 24px 转换为 rem：

24px ÷ 10px = 2.4rem

方法二：使用预处理器（Sass/Less）

使用 CSS 预处理器可以更方便地进行单位转换，减少手动计算的繁琐。

Sass 示例：

// 定义根元素字体大小
$base-font-size: 10px;// 混合宏用于转换 px 为 rem
@mixin rem($property, $values...) {$rem-values: ();@each $value in $values {$rem-values: append($rem-values, ($value / $base-font-size) + rem);}#{$property}: $rem-values;
}// 使用示例
body {@include rem(font-size, 16px); // 编译后：font-size: 1.6rem;
}h1 {@include rem(font-size, 32px); // 编译后：font-size: 3.2rem;
}

Less 示例：

// 定义根元素字体大小
@base-font-size: 10px;// 混合宏用于转换 px 为 rem
.rem(@property, @values) {@{property}: ~`(function() {var values = @{values};return values.map(function(value) {return value / @{base-font-size} + 'rem';}).join(' ');})()`;
}// 使用示例
body {.rem(font-size, 16px); // 编译后：font-size: 1.6rem;
}h1 {.rem(font-size, 32px); // 编译后：font-size: 3.2rem;
}

【CSS】什么是响应式设计？响应式设计的基本原理，怎么做

在当今多设备、多屏幕尺寸的时代，网页设计面临着前所未有的挑战。传统的固定布局已无法满足用户在不同设备上浏览网页的需求，响应式设计（Responsive Web Design）应运而生，成为网页设计的趋势和标准。本文将深入探讨响应…...

编程日记 2025/5/15 3:57:33

单机性能调优中的程序优化

目录一、系统框架的选择二、程序优化表单压缩局部刷新仅取所需逻辑清晰谨慎继承程序算法优化批处理延迟加载防止内存泄漏减少大对象引用防止争用死锁存储过程内存分配并行异步缓存单机优化顾名思义就是我们要在单机上对系统的性能进行调优…...

编程日记 2025/5/15 4:37:39

洛谷1305代码 #include<stdio.h> #include<stdlib.h> struct treenode {char val;struct treenode* left;struct treenode* right; }; struct treenode* createnode(char val) {struct treenode* node (struct treenode*)malloc(sizeof(struct treenode));node-&…...

编程日记 2025/5/14 10:20:42

小程序-视图与逻辑

前言 1. 声明式导航 open-type"switchTab"如果没有写这个，因为是tabBar所以写这个，就无法跳转。路径开始也必须为斜线 open-type"navigate"这个可以不写现在开始实现后退的效果现在我们就在list页面里面实现后退 2.编程式导航…...

编程日记 2025/5/12 20:53:41

突破封闭集限制：OvSGTR引领开放词汇场景图生成新纪元

场景图生成（Scene Graph Generation, SGG），这个领域，旨在通过解析图像来构建描述性的结构化图表，不仅能够识别图片中的物体，还能捕捉它们之间的相互关系。这种能力对于诸如图像字幕、视觉问答以及图像生成…...

编程日记 2025/4/30 21:54:12

C语言基础之【程序流程结构】

C语言基础之【程序流程结构】概述选择结构if语句if…else语句小练习：“三只小猪体重比较” if…else if…else语句小练习：“三只小猪体重比较” 三目运算符小练习：“三只小猪体重比较” switch语句小练习：**“成绩等级判断器”**…...

编程日记 2025/5/14 2:33:24

代码随想录35 动态规划

目录 leetcode 746.使用最小花费爬楼梯 leetcode 62.不同路径思路： leetcode 63.不同路径|| leetcode 746.使用最小花费爬楼梯给你一个整数数组 cost ，其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用，即可选…...

编程日记 2025/5/13 5:04:07

【游戏设计原理】98 - 时间膨胀

从上文中，我们可以得到以下几个启示： 游戏设计的核心目标是让玩家感到“时间飞逝” 游戏的成功与否，往往取决于玩家的沉浸感。如果玩家能够完全投入游戏并感受到时间飞逝，说明游戏设计在玩法、挑战、叙事等方面达到了吸引人的平衡…...

编程日记 2025/5/14 17:34:06

51单片机 06 定时器

51 单片机的定时器属于单片机的内部资源，其电路的连接和运转均在单片机内部完成。作用：1、用于计时；2、替代长时间的Delay，提高CPU 运行效率和处理速度。定时器个数：3个（T0、T1、T2）&#xf…...

编程日记 2025/5/13 1:03:53

4 前端前置技术（中）：node.js环境

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言前言...

编程日记 2025/4/13 14:31:50

【Leetcode刷题记录】1456. 定长子串中元音的最大数目---定长滑动窗口即解题思路总结

1456. 定长子串中元音的最大数目给你字符串 s 和整数 k 。请返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数。英文中的元音字母为（a, e, i, o, u）。这道题的暴力求解的思路是通过遍历字符串 s 的每一个长度为 k 的子串&#xf…...

编程日记 2025/5/12 14:19:19

C++效率掌握之STL库：string函数全解

文章目录 1.为什么要学习string？什么是string？2.string类对象的常见构造3.string类对象的容量操作4.string类对象的迭代器5.string类对象的元素访问6.string类对象的元素修改7.string类对象的查找、提取、对比8.string类的非成员函数及npos希望读者们多多…...

编程日记 2025/5/14 17:42:29

Linux命令运行原理及权限管理

目录 1.引言 2.shell命令以及运行原理 3.Linux权限 3.1Linux下的用户类型 3.2Linux权限管理 3.2.1文件访问者的分类（人） 3.2.2文件类型和访问权限（事物属性） 3.2.3文件权限值的表示方法 3.2.4文件访问权限的相关设置方法…...

编程日记 2025/5/15 4:23:19

linux内核源代码中__init的作用？

在 Linux 内核源代码中，__init是一个特殊的宏，用于标记在内核初始化阶段使用的变量或函数。这个宏的作用是告诉内核编译器和链接器，被标记的变量或函数只在内核的初始化阶段使用，在系统启动完成后就不再需要了。因此，这…...

编程日记 2025/5/14 4:02:15

系统学习算法：专题九穷举vs暴搜vs深搜vs回溯vs剪枝

其中标题的深搜，回溯，剪枝我们之前专题都已经有过学习和了解，这里多了两个穷举和暴搜，其实意思都差不多，穷举就是穷尽力气将所有情况都列举出来，暴搜就是暴力地去一个一个情况搜索，所以就是全部…...

编程日记 2025/5/11 9:07:50

《深度洞察ICA：人工智能信号处理降维的独特利器》

在人工智能技术飞速发展的今天，信号处理作为关键环节，面临着数据维度不断攀升的挑战。高维信号数据虽蕴含丰富信息，但也给处理和分析带来诸多难题，如计算资源消耗大、分析复杂度高、模型易过拟合等。独立成分分析（ICA&…...

编程日记 2025/5/15 1:56:28

FASTA 和 FASTQ 格式详解|SRA转fastq

FASTA 格式 FASTA 格式是一种用于存储序列信息的简单格式，广泛应用于核酸（DNA/RNA）和蛋白质序列的存储。它主要由两个部分组成： 描述行：以“>”符号开头，包含序列的描述信息，如名称、来源等…...

编程日记 2025/5/13 10:09:33

Docker使用指南（一）——镜像相关操作详解（实战案例教学，适合小白跟学）

目录 1.镜像名的组成 2.镜像操作相关命令镜像常用命令总结： 1. docker images 2. docker rmi 3. docker pull 4. docker push 5. docker save 6. docker load 7. docker tag 8. docker build 9. docker history 10. docker inspect 11. docker prune…...

编程日记 2025/5/5 12:46:20

为何在Kubernetes容器中以root身份运行存在风险？

作者：马辛瓦西奥内克（Marcin Wasiucionek） 引言在Kubernetes安全领域，一个常见的建议是让容器以非root用户身份运行。但是，在容器中以root身份运行，实际会带来哪些安全隐患呢？在Docker镜像和…...

编程日记 2025/5/14 10:19:16

【人工智能】多模态学习在Python中的应用：结合图像与文本数据的深度探索

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界多模态学习是人工智能领域的一个重要研究方向，旨在通过结合多种类型的数据（如图像、文本、音频等）来提高模型的性能。本文将深入探讨多模…...

编程日记 2025/5/12 3:34:22

以AI为翼：技术能力进阶的新路径

一、引言 1.1 研究背景与意义在当今数字化时代，人工智能（AI）已成为推动各领域发展的核心驱动力。从最初简单的算法模型到如今复杂的深度学习架构，AI 技术取得了令人瞩目的进步。自 20 世纪 50 年代人工智能概念提出以来&#x…...

编程日记 2025/5/12 17:31:20

使用 HTTP::Server::Simple 实现轻量级 HTTP 服务器

在Perl中，HTTP::Server::Simple 模块提供了一种轻量级的方式来实现HTTP服务器。该模块简单易用，适合快速开发和测试HTTP服务。本文将详细介绍如何使用 HTTP::Server::Simple 模块创建和配置一个轻量级HTTP服务器。安装 HTTP::Server::Simple 首先&…...

编程日记 2025/5/11 14:39:13

Jenkins 触发构建的几种常见方式

为了实现自动化构建，Jenkins 提供了多种触发构建的方式。这些触发方式可以根据开发团队的需求来选择，使得构建过程更加灵活和高效。 1. 手动触发构建手动触发构建是最简单的一种方式，通常用于开发人员或管理员手动启动构建任务。步骤：登录 Jenkins 后，进入某个项目（…...

编程日记 2025/5/12 8:59:43

算法基础--二分查找

模板 #include <iostream> #include <cstring> #include <algorithm> #include <unordered_map> /** 二分查找（Binary Search）是一种高效的查找算法，其时间复杂度为 o(logn) */ using namespace std;const int N …...

编程日记 2025/5/13 0:56:21

Vue 3 30天精进之旅：Day 14 - 项目实践

在前面的学习中，我们已经掌握了Vue 3的基础知识，包括其核心概念、Vue Router、Vuex，以及异步操作等。今天是一个重要的里程碑：我们将把这些知识整合到一个实际的项目中。通过项目实践，你将能够深入理解所学知识&#x…...

编程日记 2025/5/12 23:07:57

【Java基础-42.4】Java中的包装类对象默认值：深入解析与注意事项

在Java编程中，包装类（Wrapper Classes）是将基本数据类型（如int、char等）封装为对象的类。它们提供了更多的功能和灵活性，例如允许基本数据类型参与面向对象的操作（如存储在集合中）。…...

编程日记 2025/5/12 19:04:48

Linux进程概念

目录一.进程二.进程状态三.环境变量四.程序地址空间五.Linux2.6内核进程调度队列一.进程基本概念课本概念：程序的一个执行实例，正在执行的程序等内核观点：担当分配系统资源（CPU时间，内存）的…...

编程日记 2025/5/13 8:40:24

Linux的简单使用和部署4asszaaa0

一.部署 1 环境搭建方式主要有四种: 1. 直接安装在物理机上.但是Linux桌面使用起来非常不友好.所以不建议.[不推荐]. 2. 使用虚拟机软件,将Linux搭建在虚拟机上.但是由于当前的虚拟机软件(如VMWare之类的)存在⼀些bug,会导致环境上出现各种莫名其妙的问题比较折腾.[非常不推荐…...

编程日记 2025/5/13 2:32:40

人工智能专业术语详解（A）

人工智能不仅是指寻求如何替代人类的机器人或人类寻求自我挑战的游戏，更是指运用复杂的程序化数学，其结果与高质量的训练数据相结合，推动了我们在日常生活中所看到的技术进步。从无人驾驶汽车到寻找癌症的治疗方法，人工智能正在逐…...

编程日记 2025/5/15 4:43:38

深度学习 Pytorch 基础网络手动搭建与快速实现

为了方便后续练习的展开，我们尝试自己创建一个数据生成器，用于自主生成一些符合某些条件、具备某些特性的数据集。导入相关的包 # 随机模块 import random# 绘图模块 import matplotlib as mpl import matplotlib.pyplot as plt# 导入numpy import nu…...

编程日记 2025/5/9 10:56:31

deepseek的对话风格

概述 deepseek的对话风格，比一般的模型的回答多了思考过程，这是它比较可爱的地方，模型的回答有了思考过程，对用户而言大模型的回答不完全是一个黑盒。 deepseek的对话风格 train_prompt_style """Below is an…...

编程日记 2025/5/13 12:22:45

Spring Security(maven项目) 3.0.2.9版本 --- 改

前言： 通过实践而发现真理，又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识，又从理性认识而能动地指导革命实践，改造主观世界和客观世界。实践、认识、再实践、再认识，这种形式，循环往…...

编程日记 2025/5/13 5:04:46

OpenAI新商标申请曝光：AI硬件、机器人、量子计算全线布局？

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/5/12 11:19:51

TVM调度原语完全指南：从入门到微架构级优化

调度原语在TVM的抽象体系中，调度（Schedule）是对计算过程的时空重塑。每一个原语都是改变计算次序、数据流向或并行策略的手术刀。其核心作用可归纳为： 优化目标 max ⁡ ( 计算密度内存延迟指令开销 ) \text{优化目标} \max…...

编程日记 2025/5/14 22:10:26

AlexNet网络学习笔记（NIPS 2012）

题目：ImageNet Classification with Deep Convolutional Neural Networks 发文机构：多伦多大学作者：Alex Krizhevsky，Ilya Sutskever，Geoffrey E. Hinton（人工智能教父，AI三巨头——杰弗里.辛顿（Geoffrey Hinton），约书亚.本吉奥（Yoshua Bengio）和扬.勒丘恩（Yan…...

编程日记 2025/5/13 5:40:37

Starrocks 对比 Clickhouse

极速查询的单表查询 StarRocks 在极速查询方面上做了很多，下面着重介绍四点： 1）向量化执行：StarRocks 实现了从存储层到查询层的全面向量化执行，这是 StarRocks 速度优势的基础。向量化执行充分发挥了 CPU 的处理能力…...

编程日记 2025/5/13 10:56:20

C++实现一款功能丰富的通讯录管理系统

在学习编程的过程中，如何设计一个实用的项目是许多同学头疼的问题。如果你是一位正在学习C的同学，想通过实际项目巩固知识，那么这个通讯录管理系统绝对是一个理想的练手项目。在本文中，我将详细拆解代码逻辑，帮助你理解…...

编程日记 2025/5/11 22:22:16

动态规划之背包问题

文章目录 0-1 背包问题1. 二维动态规划实现（0-1 背包）：2. 一维动态规划实现（0-1 背包）： 完全背包问题1. 二维动态规划实现（完全背包）：2. 一维动态规划实现（完…...

编程日记 2025/5/13 7:41:02

Linux抢占式内核：技术演进与源码解析

一、引言 Linux内核作为全球广泛使用的开源操作系统核心，其设计和实现一直是计算机科学领域的研究热点。从早期的非抢占式内核到2.6版本引入的抢占式内核，Linux在实时性和响应能力上取得了显著进步。本文将深入探讨Linux抢占式内核的引入背景、技术实现以及与非抢占式内核的…...

编程日记 2025/5/14 9:29:23

Rust语言进阶之文件处理：BufWriter用法实例(一百零四)

简介： CSDN博客专家、《Android系统多媒体进阶实战》一书作者新书发布：《Android系统多媒体进阶实战》🚀 优质专栏： Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏： 多媒体系统工程师系列【…...

编程日记 2025/5/12 8:02:04

EtherCAT主站IGH-- 30 -- IGH之master.h/c文件解析

EtherCAT主站IGH-- 30 -- IGH之master.h/c文件解析 0 预览一该文件功能`master.c` 文件功能函数预览二函数功能介绍`master.c` 中主要函数的作用1. `ec_master_init`2. `ec_master_clear`3. `ec_master_thread_start`4. `ec_master_thread_stop`5. `ec_master_enter_idle_pha…...

编程日记 2025/5/12 11:19:03

关于deepseek的一些普遍误读

最近deepseek成为全球最热门的话题，甚至没有之一，无论是北美，欧洲，各大IT巨头，各个投资机构，政府官员，乃至脱口秀演员，都在不断提及这个话题，而国内，自媒体也…...

编程日记 2025/5/14 14:06:13

刷题记录动态规划-7: 63. 不同路径 II

题目：63. 不同路径 II 难度：中等给定一个 m x n 的整数数组 grid。一个机器人初始位于左上角（即 grid[0][0]）。机器人尝试移动到右下角（即 grid[m - 1][n - 1]）。机器人每次只能向下或者向右移动一步。…...

编程日记 2025/5/12 13:24:35

7-2 拯救外星人

7-2 拯救外星人你的外星人朋友不认得地球上的加减乘除符号，但是会算阶乘 —— 正整数 N 的阶乘记为 “N!”，是从 1 到 N 的连乘积。所以当他不知道“57”等于多少时，如果你告诉他等于“12!”，他就写出了“479001600”这个答案。…...

编程日记 2025/5/15 3:58:31

人工智能导论-第3章-知识点与学习笔记

参考教材3.2节的内容，介绍什么是自然演绎推理；解释“肯定后件”与“否定前件”两类错误的演绎推理是什么意义，给出具体例子加以阐述。参考教材3.3节的内容，介绍什么是文字（literal）；介绍什么是子…...

编程日记 2025/5/14 6:59:57

一个开源 GenBI AI 本地代理（确保本地数据安全），使数据驱动型团队能够与其数据进行互动，生成文本到 SQL、图表、电子表格、报告和 BI

一、GenBI AI 代理介绍（文末提供下载） github地址：https://github.com/Canner/WrenAI 本文信息图片均来源于github作者主页在 Wren AI，我们的使命是通过生成式商业智能 （GenBI） 使组织能够无缝访问数据&…...

编程日记 2025/5/12 3:21:44

Java 大视界 -- Java 大数据在智能电网中的应用与发展趋势（71）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/5/13 5:02:16

c语言练习题【消息队列、共享内存、信号灯集】

练习1:消息队列请使用消息队列实现2个终端之间互相聊天 #发送端 key_t key; int id;typedef struct Msgbuf{long channel;char buf[128];}msg_t;int main(int argc, const char *argv[]) {if (argc<2){printf("传入频道号\n");return 1;}keyftok("./ipc&q…...

编程日记 2025/5/12 6:30:46

力扣 295. 数据流的中位数

🔗 https://leetcode.cn/problems/find-median-from-data-stream/ 题目数据流中不断有数添加进来，add 表示添加数据，find 返回数据流中的中位数思路大根堆存储数据流中偏小的数据小根堆存储数据流中偏大的数据若当前的 num 比大根堆的…...

编程日记 2025/5/10 11:01:10

JavaScript原型链与继承：优化与扩展的深度探索

在 JavaScript 的世界里，万物皆对象，而每个对象都有一个与之关联的原型对象，这就构成了原型链的基础。原型链，简单来说，是一个由对象的原型相互连接形成的链式结构。每个对象都有一个内部属性[[Prototype]]&#xff0…...

编程日记 2025/5/13 6:07:53