CSS系列(12)-- 响应式设计详解
前端技术探索系列:CSS 响应式设计详解 📱
致读者:掌握响应式设计的艺术 👋
前端开发者们,
今天我们将深入探讨 CSS 响应式设计,学习如何创建适应各种设备的网页布局。
响应式基础 🚀
视口设置
<!-- 视口元标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
媒体查询基础
/* 基础媒体查询 */
/* 移动优先 */
.element {/* 移动端基础样式 */width: 100%;padding: 15px;
}/* 平板 */
@media (min-width: 768px) {.element {width: 50%;padding: 20px;}
}/* 桌面 */
@media (min-width: 1024px) {.element {width: 33.333%;padding: 30px;}
}/* 复杂媒体查询 */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {.element {/* 特定设备和方向的样式 */}
}
响应式单位
/* 响应式单位使用 */
.responsive-text {/* 相对于视口宽度 */font-size: 5vw;/* 相对于视口高度 */height: 50vh;/* 相对于视口最小尺寸 */padding: 2vmin;/* 相对于视口最大尺寸 */margin: 2vmax;/* rem 单位 */font-size: 1.2rem;
}/* 响应式根字体大小 */
html {font-size: 16px;
}@media (min-width: 768px) {html {font-size: calc(16px + 0.5vw);}
}
响应式布局策略 🎯
弹性布局
/* Flexbox 响应式布局 */
.flex-container {display: flex;flex-wrap: wrap;gap: 20px;
}.flex-item {flex: 1 1 300px; /* 增长 收缩 基准值 */
}/* 响应式导航 */
.nav {display: flex;flex-direction: column;
}@media (min-width: 768px) {.nav {flex-direction: row;justify-content: space-between;}
}
网格布局
/* Grid 响应式布局 */
.grid-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;
}/* 响应式区域布局 */
.layout {display: grid;grid-template-areas:"header""nav""main""sidebar""footer";
}@media (min-width: 768px) {.layout {grid-template-areas:"header header""nav nav""main sidebar""footer footer";grid-template-columns: 1fr 300px;}
}
响应式图片
/* 响应式图片 */
.responsive-image {max-width: 100%;height: auto;
}/* 艺术指导 */
.art-directed-img {content: url('mobile.jpg');
}@media (min-width: 768px) {.art-directed-img {content: url('tablet.jpg');}
}@media (min-width: 1024px) {.art-directed-img {content: url('desktop.jpg');}
}
实践项目:响应式框架 🛠️
class ResponsiveFramework {constructor(options = {}) {this.options = {breakpoints: {sm: 576,md: 768,lg: 992,xl: 1200,xxl: 1400},container: {sm: 540,md: 720,lg: 960,xl: 1140,xxl: 1320},columns: 12,gutters: 30,...options};this.init();}init() {this.createStyles();this.setupResizeHandler();this.setupOrientationHandler();}createStyles() {const style = document.createElement('style');style.textContent = this.generateStyles();document.head.appendChild(style);}generateStyles() {return `${this.generateGridSystem()}${this.generateUtilities()}${this.generateResponsiveHelpers()}`;}generateGridSystem() {let styles = `.container {width: 100%;margin-right: auto;margin-left: auto;padding-right: ${this.options.gutters / 2}px;padding-left: ${this.options.gutters / 2}px;}`;// 容器响应式宽度Object.entries(this.options.container).forEach(([breakpoint, width]) => {styles += `@media (min-width: ${this.options.breakpoints[breakpoint]}px) {.container {max-width: ${width}px;}}`;});// 网格系统styles += `.row {display: flex;flex-wrap: wrap;margin-right: -${this.options.gutters / 2}px;margin-left: -${this.options.gutters / 2}px;}[class^="col-"] {position: relative;width: 100%;padding-right: ${this.options.gutters / 2}px;padding-left: ${this.options.gutters / 2}px;}`;// 列宽度类for (let i = 1; i <= this.options.columns; i++) {styles += `.col-${i} {flex: 0 0 ${(i / this.options.columns) * 100}%;max-width: ${(i / this.options.columns) * 100}%;}`;}return styles;}generateUtilities() {return `.d-none { display: none !important; }.d-block { display: block !important; }.d-flex { display: flex !important; }.d-grid { display: grid !important; }.text-center { text-align: center !important; }.text-left { text-align: left !important; }.text-right { text-align: right !important; }.flex-column { flex-direction: column !important; }.flex-row { flex-direction: row !important; }.flex-wrap { flex-wrap: wrap !important; }.flex-nowrap { flex-wrap: nowrap !important; }`;}generateResponsiveHelpers() {let styles = '';Object.entries(this.options.breakpoints).forEach(([name, width]) => {styles += `@media (min-width: ${width}px) {.d-${name}-none { display: none !important; }.d-${name}-block { display: block !important; }.d-${name}-flex { display: flex !important; }.d-${name}-grid { display: grid !important; }.text-${name}-center { text-align: center !important; }.text-${name}-left { text-align: left !important; }.text-${name}-right { text-align: right !important; }}`;});return styles;}setupResizeHandler() {let timeout;window.addEventListener('resize', () => {clearTimeout(timeout);timeout = setTimeout(() => {this.handleResize();}, 250);});}handleResize() {const width = window.innerWidth;document.documentElement.style.setProperty('--viewport-width', `${width}px`);}setupOrientationHandler() {window.addEventListener('orientationchange', () => {this.handleOrientationChange();});}handleOrientationChange() {// 处理方向变化document.documentElement.classList.toggle('landscape', window.orientation === 90 || window.orientation === -90);}
}
最佳实践建议 💡
-
设计策略
- 采用移动优先
- 设置合理断点
- 使用相对单位
- 保持简单性
-
性能优化
- 优化媒体资源
- 控制 HTTP 请求
- 使用条件加载
- 优化渲染性能
-
可访问性
- 保持内容可读
- 适当的触摸目标
- 键盘导航支持
- 屏幕阅读器兼容
写在最后 🌟
响应式设计是现代网页开发的基础技能,掌握这些技术可以帮助我们创建更好的用户体验。
进一步学习资源 📚
- 响应式设计模式
- 移动优先策略
- 性能优化指南
- 响应式框架研究
如果你觉得这篇文章有帮助,欢迎点赞收藏,也期待在评论区看到你的想法和建议!👇
终身学习,共同成长。
咱们下一期见
💻
相关文章:

CSS系列(12)-- 响应式设计详解
前端技术探索系列:CSS 响应式设计详解 📱 致读者:掌握响应式设计的艺术 👋 前端开发者们, 今天我们将深入探讨 CSS 响应式设计,学习如何创建适应各种设备的网页布局。 响应式基础 🚀 视口设…...

filecoin boost GraphQL API 查询
查询示例 查询失败交易 curl -X POST \ -H "Content-Type: application/json" \ -d {"query":"query { deals(limit: 10, query: \"failed to get size of imported\") { deals { ID CreatedAt Message } } }"} \ http://localhost:…...

SAS - Subtractive Port
在SAS(串行连接SCSI,Serial Attached SCSI)协议中,subtractive port 是一种特殊类型的端口,主要用于设备间的路由功能。它的作用是在路径选择过程中充当默认路径,以处理未明确指定路径的请求。以下是它的定…...

TCP客户端模拟链接websocket服务端
因一些特殊原因研究了下TCP模拟链接websocket。原理上可以连接但具体怎么连接怎么操作就不知道了,需要研究下,以下是个人研究的方案。 用线上和本地地址来做例子: 线上wss地址:wss://server.cs.com/cs/vido/1 本地地址ws://127…...

TypeScript 的崛起:全面解析与深度洞察
一、背景与起源 (一)JavaScript 的局限性 类型系统缺失 难以在编码阶段发现类型相关错误,导致运行时错误频发。例如,将字符串误当作数字进行数学运算,可能在运行时才暴露问题。函数参数类型不明确,容易传入…...

c#笔记2024
Ctrl r e自动添加get和set CompositeCurve3d 复合曲线 List<Entity> entS listline.Cast<Entity>().ToList();//list类型强转 前面拼上\u0003,就可以实现,不管有没有命令都能打断当前命令的效果 取消其他命令:Z.doc.SendStri…...

Hadoop一课一得
Hadoop作为大数据时代的奠基技术之一,自问世以来就深刻改变了海量数据存储与处理的方式。本文将带您深入了解Hadoop,从其起源、核心架构、关键组件,到典型应用场景,并结合代码示例和图示,帮助您更好地掌握Hadoop的实战…...

AI生成图表化:深入探索Mermaid
引言 在使用生成式AI时,只要你提出让AI帮你生成mermaid图,AI的生成就会出现丰富的图形! 在现代文档编写中,图表的使用不仅能增强文档的可读性,还能更直观地表达复杂的概念和流程。Mermaid 作为一款开源的图表绘制工具…...

25.DDD数量关系
学习视频来源:DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 关系型数据库的数量关系领域模型的数量关系实现聚合数量关系聚合内聚合间具体说明代码 数量关系是本质吗?领域对象之…...

Linux应用开发————线程池
线程池 定义:简单来说,就是存放多个线程的池子。当创建线程池时,就给池中存放一些线程,如果有任务要执行,就从池中取出一个线程执行任务,依次类推;当所有线程都在执行任务时,其他任务…...

Spring Boot 集成阿里云OSS 完成文件上传下载
前言: 文件上传下载在项目开发中是一个非常常见的业务场景,在云服务上还没有兴起的时候,一般来说都会把文件单独存放到文件服务器上,随着云服务的兴起,各类云服务厂商都提供了 OSS 服务,本篇我们分享 Spri…...

使用ERA5数据绘制风向玫瑰图的简易流程
使用ERA5数据绘制风向玫瑰图的简易流程 今天需要做一个2017年-2023年的平均风向的统计,做一个风向玫瑰图,想到的还是高分辨率的ERA5land的数据(0.1分辨率,逐小时分辨率,1950年至今)。 风向,我分为了16个&…...

测试脚本并发多进程:pytest-xdist用法
参考:https://www.cnblogs.com/poloyy/p/12694861.html pytest-xdist详解: https://www.cnblogs.com/poloyy/p/14708825.html 总 https://www.cnblogs.com/poloyy/category/1690628.html...

数据可视化的Python实现
一、GDELT介绍 GDELT ( www.gdeltproject.org ) 每时每刻监控着每个国家的几乎每个角落的 100 多种语言的新闻媒体 -- 印刷的、广播的和web 形式的,识别人员、位置、组织、数量、主题、数据源、情绪、报价、图片和每秒都在推动全球社会的事件,GDELT 为全…...

【Linux系列】Linux 系统配置文件详解:`/etc/profile`、`~/.bashrc` 和 `~/.bash_profile`
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

uni-app实现小程序、H5图片轮播预览、双指缩放、双击放大、单击还原、滑动切换功能
前言 这次的标题有点长,主要是想要表述的功能点有点多; 简单做一下需求描述 产品要求在商品详情页的头部轮播图部分,可以单击预览大图,同时在预览界面可以双指放大缩小图片并且可以移动查看图片,双击放大࿰…...

游戏引擎学习第45天
仓库: https://gitee.com/mrxiao_com/2d_game 回顾 我们刚刚开始研究运动方程,展示了如何处理当人物遇到障碍物时的情况。有一种版本是角色会从障碍物上反弹,而另一版本是角色会完全停下来。这种方式感觉不太自然,因为在游戏中,…...

electron常用方法
一,,electron设置去除顶部导航栏和menu 1,electron项目 在创建BrowserWindow实例的main.js页面添加frame:false属性 2,electron-vue项目 在src/main/index.js文件下找到创建窗口的方法(createWindow)&…...

【Spark】Spark Join类型及Join实现方式
如果觉得这篇文章对您有帮助,别忘了点赞、分享或关注哦!您的一点小小支持,不仅能帮助更多人找到有价值的内容,还能鼓励我持续分享更多精彩的技术文章。感谢您的支持,让我们一起在技术的世界中不断进步! Sp…...

meta llama 大模型一个基础语言模型的集合
LLaMA 是一个基础语言模型的集合,参数范围从 7B 到 65B。我们在数万亿个 Token 上训练我们的模型,并表明可以专门使用公开可用的数据集来训练最先进的模型,而无需诉诸专有的和无法访问的数据集。特别是,LLaMA-13B 在大多数基准测试…...

JAVA爬虫获取1688关键词接口
以下是使用Java爬虫获取1688关键词接口的详细步骤和示例代码: 一、获取API接口访问权限 要使用1688关键词接口,首先需要获取API的使用权限,并了解接口规范。以下是获取API接口的详细步骤: 注册账号:在1688平台注册一…...

操作系统——内存管理
1、什么是虚拟内存?它是如何实现的?虚拟内存与物理内存之间有什么关系? 虚拟内存是操作系统提供的一种内存管理机制,它使程序认为自己拥有连续的内存空间,但实际上内存可能被分散存储在物理内存和磁盘交换空间中。 虚…...

android studio 模拟器不能联网?
模拟器路径: C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe.关闭所有AVD设备实例 导航至: C:\Users\userName\AppData\Local\Android\Sdk\emulator查看模拟器名称 AdministratorDESKTOP-6JB1OGC MINGW64 ~/AppData/Local/…...

CTF-WEB: 目录穿越与模板注入 [第一届国城杯 Ez_Gallery ] 赛后学习笔记
step1 验证码处存在逻辑漏洞,只要不申请刷新验证码就一直有效 字典爆破得到 admin:123456 step2 /info?file../../../proc/self/cmdline获得 python/app/app.py经尝试,读取存在的目录时会返回 A server error occurred. Please contact the administrator./info?file.…...

数据结构6.4——归并排序
基本思想: 归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法的一个非常典型的应用。将已有的子序列合并,得到完全有序的序列;即先使每个子序列有序,再使子序列段间有序。若将两个有序表合并成一个…...

【html 常用MIME类型列表】
本表仅列出了常用的MIME类型,完整列表参考文档。 浏览器通常使用 MIME 类型(而不是文件扩展名)来确定如何处理 URL,因此 Web 服务器在响应头中添加正确的 MIME 类型非常重要。 如果配置不正确,浏览器可能会曲解文件内容…...

Linux之vim编辑器
vi编辑器是所有Unix及linux系统下标准的编辑器,类似于Windows系统下的记事本。很多软件默认使用vi作为他们编辑的接口。vim是进阶版的vi,vim可以视为一种程序编辑器。 前言: 1.文件准备 复制 /etc/passwd文件到自己的目录下(不…...

【工具介绍】可以批量查看LableMe标注的图像文件信息~
在图像处理和计算机视觉领域,LabelMe是一个广泛使用的图像标注工具,它帮助我们对图像中的物体进行精确的标注。但是,当标注完成后,我们常常需要一个工具来批量查看这些标注信息。 今天,我要介绍的这款exe程序…...

2024年山西省第十八届职业院校技能大赛 (高职组)“信息安全管理与评估”赛项规程
2024年山西省第十八届职业院校技能大赛 (高职组)“信息安全管理与评估”赛项规程 一、赛项名称 赛项名称:信息安全管理与评估 英文名称:Information Security Management and Evaluation 赛项组别:高职教师组 赛项归属…...

STM32完全学习——STemWin的移植小插曲
一、移植编译的一些问题 新版的STemWin的库没有区别编译器,只有一些这样的文件,默认你将这些文件导入到KEIL中,然后编译就会有下面的错误。 ..\MEWIN\STemWin\Lib\STemWin_CM4_wc16.a(1): error: A1167E: Invalid line start ..\MEWIN\STe…...

镇江建设网站/网络推广都需要做什么
2019独角兽企业重金招聘Python工程师标准>>> 下载http://git.oschina.net/wltea/IK-Analyzer-2012FF解压之后将dist/IKAnalyzer2012FF_u1.jar复制到tomcat的solr的lib文件夹下将IKAnalyzer.cfg.xml和stopword.dic复制到solr/home的collection1\conf文件夹下打开sche…...

网站要怎样建设/百度导航官网
MyBatis可谓是Java开发工程师必须要掌握的持久层框架,它能够让我们更容易的通过Java代码操作数据库,并且它还有很高的扩展性,我们可以自定义插件,去让MyBatis的功能变的更为强大,本篇文章我们就以打印SQL,S…...

唐山公司网站建设 中企动力/头条搜索
1、源代码安装nginx1)、所需环境:开发环境:Development toolsServer Platform DevelopmentAdditional Developmentpcre-develnginx-1.6.0.tar.gz2)、源码安装nginx:拆解源代码包到/usr/local/src/目录下创建系统账号和组nginx[roo…...

网站开发项目需求/贵州二级站seo整站优化排名
介绍: 借助ruoyi这个平台开发一套资源平台。直接采用了RuoYi-Vue前后端分离基础平台。打造一款开源的电频平台。集成了奇文网盘。后台用的是vuespringboot,门户采用nuxtjsspringboot。 技术要点 前端采用Vue、Element UI、nuxt 基础平台采用的是RuoYi-…...

本溪城乡建设委员会网站/企业网站排名优化
500立方米的锦鲤鱼池过滤系统改造后,水质终于清澈了!锦鲤鱼池作为园林景观项目的组成元素之一,其核心在于用水造景,在很多公共区域、市政园林、酒店会所、私家庭院都有分布。在当前,锦鲤鱼池可以说随处可见,…...

做网站虚拟主机哪家好/百度广告一天多少钱
我们在使用 vue element 写后台管理模板时,肯定逃不过左侧菜单也称侧边栏。举例:我们现在有一个 A 模块,A 模块中有详情页面和编辑页面【一共三个页面】,我们通常怎么考虑?将三个页面写在一个 vue 里,通过…...