编辑本期文章以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发。...了解断点、媒体查询、栅格布局断点媒体查询栅格布局2. 封装媒体查询监听断点工具类3. 配合媒体查询做 Swiper() 轮播图分割效果4. 配合媒体查询做 Tab 栏 UI 展示位置变动5....了解断点、媒体查询、栅格布局断点鸿蒙提供断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，不同设备会进入到不同的断点区间，在不同的区间下，我们可以可根据需要实现不同的页面布局效果...断点名称取值范围（vp）xs[0, 320）sm[320, 600)md[600, 840)lg[840, +∞)媒体查询媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局...封装媒体查询监听断点工具类给我们的业务封装媒体查询监听断点工具类，以便后续使用，在首页生命周期过程中进行调用初始化，利用 LocalStorage 或 AppStorage 保存当前屏幕断点的名称，在应用的任意页面内通过
输出将只有一个CSS文件，这对于浏览器和服务器来说是一件好事，以避免有大量的HTTP请求。 媒体查询的样式应该放在哪里？...文件的分离为我们提供了一种简单的结构顺序，因此将媒体查询放置在每个组件中，靠近它们自己的样式，是最好的位置。 现在，由于每个组件都有相同的断点，将它们放入变量中以便更轻松地维护代码会更好。...网络上的常见做法是使用仅以最小宽度为起点而没有最大宽度的断点（称之为“开放式断点”），这是一个非常大的问题！你问为什么？因为你几乎无法控制上层断点会受到什么影响！...Open breakpoints 打开断点 当我们使用媒体查询时，有一个起始值但没有结束值。例如: Closed breakpoints 闭合断点 当我们使用具有开始和结束值的媒体查询时。...您可以在同一个媒体查询中使用尽可能多的断点，使用逗号（表示“或”），因为我们已经将这些断点保存在变量中，所以可以轻松使用它们。 CSS封装的威力与闭合断点 现在让我们再来看看这个主标题组件。
AI绘画基于高质量的中文图文数据训练，在图片多模表征、多模搜索与生成上达到先进水平
小数像素问题，浏览器渲染最小的单位是像素，元素根据屏幕宽度自适应，通过 rem 计算后可能会出现小数像素，浏览器会对这部分小数四舍五入，按照整数渲染。...1.6 rem+媒体查询布局 rem+媒体查询布局原理 主要实现是通过媒体查询，通过给不同分辨率的设备编写不同的样式实现响应式布局，用于解决不同设备不同分辨率之间兼容问题，一般是指PC、平板、手机设备之间较大的分辨率差异...，工作量比较大 通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生显著变化，用户体验不太友好 页面中上存在一定的“冗余”代码 最致命的还是由于PC和移动的交互方式和用户行为存在差距，不仅仅需要...，也有 rem，字体的样式中有 rem，有 em，也有固定大小的 px；在屏幕宽度过大时不再缩放，也会用到媒体查询，并且响应式设计更多地可能是针对不同设备间的自适应 对于移动端web页面的自适应方案来说...，目的是适应不同的浏览器窗口大小 移动端图片处理 指定图像宽度时使用相对单位，防止意外溢出视口，如 width: 50%，将图片宽度设置为包含元素宽度的 50% 因为 CSS 允许内容溢出容器， 需要使用
例如：单独地，我们可以确定用户通过prefers-reduced-data媒体查询启用了节省带宽的浏览器偏好设置，并使用它来始终选择低密度图像，而不考虑其显示密度-但除非每个开发人员在每个网站上都一致地实施它...通过使用描述性语法而不是指令性语法，我们不需要手动设置断点并考虑未来的视口和DPR，只需向浏览器提供信息并允许其为我们确定答案。...这些条件使用了熟悉的媒体查询语法。这个语法是第一个匹配：一旦媒体条件匹配，浏览器停止解析sizes属性，然后应用指定的值。...如果你使用max-width媒体查询来编写这个sizes属性：” <img sizes="(max-width: 1200px) 100vw, calc(80vw - 2em)"...也就是说，无论好坏如何，这是经过设计的：使这些语法不那么简洁，更容易被我们人类解析，可能会使它们更难被浏览器解析。字符串中添加的复杂性越多，就越有可能出现解析器错误或不同浏览器之间行为意外不同的情况。
无论是调整不同屏幕尺寸下的样式，还是为新的元素添加响应式规则，都可以通过调用封装好的混合宏轻松实现。...scss 代码 // 定义一个名为 $breakpoints 的变量，并包含五个媒体查询的断点和对应的最小、最大宽度 $breakpoints: ( 'phone': (320px, 480px...@content; } } } // 定义一个名为 repod-to 的 mixin，根据传入的断点名称生成相应的媒体查询 @mixin repod-to($breakname...) { // 判断断点名称是否为 'all' @if $breakname == 'all' { // 如果是 'all'，遍历所有断点并生成相应的媒体查询类....header { @include repod-to('all') { // 在所有断点范围内，设置.header 类的高度为 100px，宽度为 200px
在 ResizeObserver 出现之前，我们也有一些实现响应式布局的方案，包括： JS 方案—— window.onresize / window.matchMedia； CSS 方案——媒体查询；...media query 媒体查询 - CSS 方案 在 CSS 中可以通过媒体查询实现响应式，但 CSS 的媒体查询只能监听全局属性，比如 viewport 的大小、screen 的大小等，并不能监听元素级别的尺寸变化...window.matchMedia - JS 方案 可以把 matchMedia 理解为 CSS 中媒体查询的JS方案。...此外，CSS 的媒体查询存在着循环引用的问题，window.onresize 和 window.matchMedia 则都需要在 viewport 大小变化时手动获取元素的大小，一旦操作过于频繁则可能导致浏览器多次...默认监听 content-box变化以触发监听。
尚未列入W3C标准但已得到主流浏览器支持。...示例 含义 visual viewport指的是浏览器可视区域，...这里的宽高可以通过window.visualViewport查询，但不总是等于window.innerHeight和window.innerWidth，因为存在device pixel ratio（设备像素比...比如retina屏幕上的像素比是2，那么对css来说，渲染宽度/高度只有物理宽度/高度的一半，四个物理像素对应一个渲染像素。...CSS media query breakpoint 由viewport划定了渲染像素后，CSS媒体查询断点才能工作正常。以下样式表仅对渲染宽度小于等于720的设备有效。
本文将深入浅出地探讨响应式设计的核心概念——媒体查询，并分析一些常见的问题、易错点及其解决方案，辅以实用的代码示例。...二、媒体查询概述 媒体查询（Media Queries）是一种CSS技术，允许开发者根据设备的特征（如视口宽度、设备像素比等）来应用不同的CSS样式规则。...硬编码断点 问题描述：直接使用固定数值作为媒体查询的断点，忽略设备多样性。 避免方法： 考虑内容优先，根据内容的可读性和布局需求设定断点。 使用百分比或em单位，让断点更加灵活。 3....过度依赖媒体查询 问题描述：过度细分媒体查询，导致CSS文件庞大且难以维护。 最佳实践： 利用CSS变量和模块化设计减少重复代码。...采用移动优先策略，先编写适用于小屏幕的样式，再通过媒体查询逐步增加大屏幕的样式。
如前所述，我们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定情况下使用。...注意，我们仍以这种方式使用媒体查询，但是元素本身驱动了响应行为，而不是在CSS中定义了断点 ?。...浏览器查找媒体查询与当前视口宽度匹配的第一个元素，然后它将显示适当的图像(在srcset属性中指定)。...在此示例中，我们告诉浏览器永远不要让.box类的元素的宽度减小到45％或600px以下（以视口宽度为准，以最小者为准）： .box { width : min(45%, 600px) } 如果45％...计算得出的值小于600px，则浏览器将使用45％作为宽度。
srcset和sizes旨在无缝地工作，根据用户浏览器的指示无缝地交换源。然而，有时我们希望在断点处更改源以更好地突出内容，就像调整页面布局一样。...例如：在大视口上，带有小中央焦点的全宽头图像可能效果很好： 但是，当缩小以适应小视口时，图像的中央焦点可能会丢失： 这些图像源的主题相同，但为了更好地视觉聚焦于该主题，我们将希望图像源的比例在断点处发生变化...每个 source 元素都有定义选择该源的条件的source: media，它接受媒体查询，以及类型，它接受媒体类型（以前称为“MIME类型”）。...如果你使用min-width媒体查询，则应首先使用最大的源，如前面的代码所示。当使用max-width媒体查询时，应该将最小的源放在第一位。...这为浏览器提供了所有所需的信息，以立即确定该提供的图像候选项是否可以解码而无需进行任何外部请求——如果媒体类型未被识别，则及其所有候选项都将被忽略，并且浏览器将继续执行。
* 中型设备宽度范围 */ static readonly RANGE_MD: string = "(520vp<=width<840vp)"; /** * 大型设备宽度范围...： 这是鸿蒙系统提供的媒体查询 API，用于创建一个媒体查询监听器 参数是一个媒体查询条件字符串，例如"(320vp宽度在 320vp 到 520vp 之间 返回一个...MediaQueryListener对象，可用于监听媒体查询条件的变化 与 Web 开发中的window.matchMedia()类似，但针对鸿蒙系统优化 listener.on("change",...callback)： 为媒体查询监听器注册一个变化事件的回调函数 当设备屏幕尺寸变化导致媒体查询条件结果发生变化时，会触发回调函数 回调函数接收一个MediaQueryResult对象，其中matches...属性表示当前是否匹配查询条件 这种事件监听模式使断点系统能够实时响应设备尺寸变化 AppStorage.set： 将当前断点信息存储到应用的全局状态存储中 使用"currentBreakpoint
融合响应式设计，利用 JavaScript 判断 和 CSS 来进行媒体查询，是响应式设计与自适应设计结合的方案。...自适应设计：根据设备特点，使用 JavaScript 来区分 PC UI 和 Mobile UI 响应式设计：在需要调整出更好的 UI 时，可以加入一些 CSS 媒体查询的断点，比如常见的大屏显示效果...Boolean false iPad 微信是否恒定为 Mobile UI CSS 变量 —— CSS 媒体查询 基本原理：在不同的 UI 模式内的变量设置 预处理的 CSS 变量示例 可以使用 Stylus...若 window.screen.width, window.screen.height 的最大值也比 widthMode 宽度断点还小，那就可以认为是 Mobile 进入页面时，竖屏时以 window.screen.width...此时，可以选择以 1200px 作为更大屏的媒体查询断点。也就是说，我这里运用了响应式设计中的 CSS 媒体查询。
在媒体查询断点中推荐使用 em 单位。在各大主流浏览器中，当用户缩放页面或者改变默认的字号时，只有 em 单位表现一致。以 px 或者 rem 单位为断点在 Safari 浏览器里不太可靠。...同时当用户默认字号改变的时候，em 还能相应地缩放，因此它更适合当断点。 在媒体查询里更适合用 em，em 是基于浏览器默认字号的（通常是 16px）。...在任何媒体查询之前，最先写的是移动端样式，然后设置越来越大的断点。...然后是针对中等屏幕的媒体查询，其中的规则基于移动端样式构建并且会覆盖移动端样式。最后是针对大屏幕的媒体查询，在这里添加网页最后的布局。 有的设计可能只需要一个断点，有的设计可能需要多个断点。...此时需要将这些样式放在 max-width 媒体查询中，这样就只对较小的断点生效，但是用太多的 max-width 媒体查询也很有可能是没有遵循移动优先原则所致。
Bootstrap通过一套灵活的网格系统和媒体查询实现了这一点。网格系统Bootstrap的网格系统基于列和行构建，可以自适应地填充容器宽度。...媒体查询媒体查询是CSS3引入的一种特性，用于根据不同设备的特性（如屏幕尺寸、分辨率等）应用不同的样式规则。Bootstrap利用媒体查询来定义不同屏幕尺寸下的样式，从而实现响应式设计。...忽视断点Bootstrap定义了多个断点，用于区分不同的屏幕尺寸。忽视这些断点可能会导致布局在某些设备上表现不佳。...解决方案使用适当的断点类前缀（如.col-sm-, .col-md-, .col-lg-等），并测试不同屏幕尺寸下的布局。3....测试多种设备在开发过程中，使用不同设备和浏览器测试页面，确保响应式设计在各种环境下都能正常工作。
通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。 一、CSS媒体查询基础 1.1 什么是媒体查询？...媒体查询是CSS3引入的一种技术，允许开发者根据用户的设备特性应用不同的样式规则。它不仅可以检测设备的类型，还能检查诸如设备宽度、高度、分辨率等特性。...常见的媒体特征包括设备的宽度、高度、分辨率和方向等。.../* 不适用于屏幕设备 */ @media not screen { body { display: none; } } 三、如何选择断点 断点是媒体查询中定义不同样式的关键点...4.1 移动优先的媒体查询 在移动优先设计中，我们通常使用min-width媒体查询，即默认样式适用于所有设备，然后通过断点逐步为更大屏幕的设备添加样式。
在你依据少数几个严格的断点（breakpoints）来做设计决策之前，确保你已经考虑了屏幕尺寸和浏览器视口的巨大碎片化问题。...如果你以灵活、流畅的方式进行构建，这并不是问题。这一点在这个图表中有所体现。然而，如果你倾向于使用非常特定的断点和硬编码的字体、尺寸和间距，即使出发点很好，你也可能发现自己并没有提供最佳的用户体验。...以一个具有固定页眉和/或页脚的“像素完美”（pixel perfect）用户界面为例。当你缩小开发用浏览器的尺寸时，它可能看起来很棒，但在前面概述的条件下，它看起来如何呢？...是的，如果你使用经典的768px、1024px和1280px断点，通过媒体查询配置布局和字体大小可能是有意义的，但中间还有大量的尺寸怎么办？...有趣的比较 来自流行框架的断点（Breakpoints） Figma中的断点 这一切的要点是什么？ 我们想强调的主要观点是，你根本无法知道用户会以何种方式访问你的网站或网络应用。
移动端页面需要具备响应式设计，以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术，确保页面在各种设备上都能良好显示。...媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定 CSS 样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。...、iPad 等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。...){样式代码}only 关键字表示仅在媒体查询匹配成功时应用指定样式（可以通过它让选中的样式在老式浏览器中不被应用），例如：/*在老式浏览器中被解析为media=“screen”，它把后面的逻辑表达式忽略了...所以老式浏览器会应用样式。所以，在使用媒体查询时，only最好不要忽略。
弹性盒与网格 设备断点与 CSS 媒体查询 响应式布局的一些最佳实践 响应式设计 著名的网页设计师 Ehan Marcotte 在 2010 年 5 月的一篇名为《Responsive Web Design...UI 库对 Grid 的实现中，通常会使用到媒体查询，这也是响应式布局的核心技术。...媒体查询 媒体查询（Media Query）是 CSS3 规范中的一部分，媒体查询提供了简单的判断方法，允许开发者根据不同的设备特征应用不同的样式。...srcset 支持定义几组图片和对应的尺寸 sizes 支持一组媒体查询条件 <!...， 获取设备视口宽度 从上到下找到第一个为真的媒体查询 获取该条件对应的图片尺寸 加载 srcset 中最接近这个尺寸的图片并显示 除了上述方式外，我们也可以使用 HTML5 标准中的 picture
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
