响应式布局

【时光清单｜16】HarmonyOS ArkTS 多设备布局实战：适配手机、平板和 PC/2in1 的窗口变化多设备适配最容易出现一种误判：页面根节点已经写了 width('100%')、height('100%')，所以“天然支持所有屏幕”。百分比只能让容器填满窗口，却不会自动决定宽屏应该显示几列、导航应该放底部还是侧边、正文是否需要最大阅读宽度、卡片信息密度是否合理。手机页面直接铺到平板或 PC/2in1 上，通常不会编译失败，但会出现更隐蔽的体验问题：内容横向拉得过长，五列快捷入口在窄窗拥挤，固定高度网格截断，底部 Tab 在宽屏上利用率低，窗口缩小时控件来不及重排。

【天体运行模拟｜16】HarmonyOS ArkTS 多设备布局实战：适配手机、平板和 PC/2in1 的窗口变化同一套 ArkUI 页面跑到手机、平板和 PC/2in1，真正困难的并不是把宽度改成百分比，而是窗口变化后仍能保持信息层级、操作可达性和业务状态稳定。手机竖屏需要紧凑网格，平板分屏可能只有半屏宽，2in1 窗口还能被鼠标连续拖动。如果布局只按设备名称分支，设备没变、窗口却变了，页面就会卡在错误结构里。

【寻迹校园 HarmonyOS NEXT 实战 37】一套 ArkUI 适配四档宽度：sm、md、lg、xl 响应式 Shell 实战本章导读：这是“寻迹校园 HarmonyOS NEXT 实战”系列第 37 篇。本文基于 Index.ets、Bottom/Top/SideNavigation、HomePage.ets 与 2026-08-12 模拟器验收记录，完整拆解 <600vp、600–839vp、840–1279vp、>=1280vp 四档 ArkUI Shell 的导航、内容密度、状态归属和页面复用方式，同时明确“保留大屏代码”不等于当前应用市场已经支持 Tablet 或 2-in-1。

【知律｜16】HarmonyOS ArkTS 多设备布局实战：适配手机、平板和 PC/2in1 的窗口变化多设备适配不是把手机页面的宽度改成 100% 就结束。手机适合底部主导航，平板和 PC/2in1 更适合侧边导航；分类卡片要随着可用宽度增加列数，题库详情在宽窗口中可以拆成双栏；窗口缩小时，内容必须重新回到单列，同时保持按钮、长文本和底部安全区可达。

想你依然心痛

HarmonyOS ArkTS 自适应布局与响应式设计实战指南你的价值从来不取决于他人的解读，你的人生也无需活在别人的认知框架里。如果我所有的社会标签都被拿走，我是否依然认可自己？如果答案是否，说明你仍活在别人框架里。

叫我一声阿雷吧

原生 JS 实现滚动导航吸顶：智能吸顶 + 高亮联动 + 平滑过渡（附完整源码）滚动导航吸顶（Sticky Nav）是现代 Web 页面的核心交互组件，核心作用是固定导航栏，解决长页面滚动后导航消失、用户切换页面板块不便的问题。常见应用场景覆盖全行业：

叫我一声阿雷吧

原生 JS 实现图片预览上传组件：多图上传 + 拖拽上传 + 裁剪预览 + 进度显示（附完整源码）图片上传是前端开发中高频且核心的功能场景，如头像上传、素材管理、表单提交等。本文基于原生 HTML+CSS+JavaScript 实现一套企业级图片预览上传组件，包含多图选择、拖拽上传、实时预览、图片裁剪、上传进度显示、文件大小 / 格式校验等功能，无任何第三方框架依赖，代码模块化封装，可直接集成到各类项目中。

ui5_Walkthrough_Step 34: Responsiveness响应式布局响应式布局（Responsiveness）：网页或应用能够根据不同的设备屏幕尺寸和方向，自动调整其布局、内容和交互方式，以提供最佳的用户体验。

白鹿第一帅

DevUI 主题定制实战：CSS 变量实现品牌主题与暗黑模式开发指南文章作者：白鹿第一帅，作者主页：https://blog.csdn.net/qq_22695001，未经授权，严禁转载，侵权必究！

西洼工作室

CSS响应式布局全攻略逻辑运算符用于组合或修改布尔值，常用于条件判断和响应式布局的媒体查询中。tip假设整个响应式效果，对应的断点如下：

【方案】前端UI布局的绝技，响应式布局，多端适配大家好，欢迎来到停止重构的频道。本期讨论网页UI布局。网页UI布局是前端开发中占比较多的部分，做完网页布局也就差不多完成了一半的工作。

三天不学习

CSS 之响应式设计前世今生早年设计 Web 时，页面是以适配特定的屏幕大小为考量创建的。如果用户正在使用比设计者考虑到的更小或者更大的屏幕，那么结果从多余的滚动条，到过长的行和没有被合理利用的空间，不一而足。随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。这是改变我们设计多设备网页的方式的思想，在这篇文章里，我们将会帮你理解掌握它时所需知道的主要技能。

鸿蒙HarmonyOS开发：一次开发，多端部署（界面级）天气应用案例布局可以分为自适应布局和响应式布局，二者的介绍如下表所示。自适应布局多用于解决页面各区域内的布局差异，响应式布局多用于解决页面各区域间的布局差异。

关于使用Bootstrap实现响应式设计的一些感想最近在写一个项目，要求使用响应式设计，这可让我十分头疼，又要临时学一下bootstrap，一路学下来，不能说是收获满满，但也是有一些心得体会，于是在此记录。

一只小阿乐

前端 css3 媒体查询实现响应式布局什么是媒体查询？媒体查询（Media Query）是CSS3新语法。将不同的终端设备划分成不同的类型，称为媒体类型

CSS的媒体查询：响应式布局的利器CSS媒体查询是CSS层叠样式表(Cascading Style Sheets)中的一个核心功能，它使得开发者能够根据不同的设备特性和环境条件来应用不同的样式规则。这是实现响应式网页设计的关键技术，确保网站或应用能够在多种设备上，包括桌面、平板、手机等，提供良好的用户体验。

HarmonyOS 鸿蒙开发——响应式布局当基本的自适应布局无法满足多终端上屏幕的体验要求时，我们需要针对不同终端的屏幕特点，设定容器与栅格的关系达到响应式的布局。通常响应式布局能根据栅格断点变化进行有级变化。

我是有底线的