网格容器通过设置特定的CSS属性（如display: grid或display: inline-grid）来定义，而网格项目则是网格容器内的子元素。...可以将页面划分为不同的区域，如导航栏、内容区、侧边栏等，并精确控制它们的大小、位置和排列方式。（三）数据可视化在数据可视化应用中，网格布局可以帮助组织图表、表格和其他数据显示元素。...（四）卡片式布局卡片式布局是现代网页设计中常见的样式。CSS Grid布局可以方便地创建卡片式布局，包括设置卡片的宽度、高度、间距以及排列方式。...（二）带有不同大小列的布局如果想要创建一列宽度为三分之一，另一列为三分之二的布局，可以使用以下代码：将父元素设置为网格容器，display: grid。...使用grid-template-columns: 1fr 2fr来指定两列的大小。
由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。 接下来我们给 .card 元素一个初始宽度。...flex: 1 === flex: 1 1 0 有确定大小的网格元素 有时候你需要的效果并不是同样大小的水平网格布局。 你可能想要一个元素是其他的两倍，或者几分之一。 ?...你可以给任何一个元素设定不同的对齐方式。...应用 .row\_cell — top 类可以让特定的元素在 row 内靠顶部对齐 你一定有在标识文本中给特定元素加上这个类。...给特定的元素加上 .row\_cell — center 类会让它在 row 内居中对齐 行内对齐 像特定的元素可以对齐一样，行内子元素也可以整体对齐。
Containment（CSS contain 属性） contain 属性用于识别和测量特定容器的大小，然后根据该容器的大小应用不同的样式。...有点像媒体查询 @media，但不是测量视窗大小，而是测量容纳内容的盒子的大小。...比如下面三个卡片组件的页眉和页脚都对齐了，即使每张卡片都有独立的网格（grid），这是因为每张卡片都是跨越父网格的三行项目，然后使用子网格 Subgrid 将这些行继承到每个卡片中。...同理，svw、 lvw、 和 dvw 用于宽度单位。...Web Compat（Web 兼容） 浏览器中的特定错误可能不导致某些网站无法按预期渲染，或者一个浏览器可能与 Web 标准不同，从而导致网站或 Web 应用程序用户的体验，Interop 2022
.d-none 在较小屏幕下隐藏 .d-{sm | md | lg | xl}-none 在指定屏幕大小下隐藏 .d-block 在较小屏幕下显示 .d-{sm | md | lg | xl}-block...在指定屏幕大小下显示 【常用背景颜色】 .bg-primary 重要的背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 ....时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）,示例: .table-responsive...注意使用bg-{...}不是理想的配色方案，不建议使用。 【卡片】卡片用于定义一块带圆角的区域。...触发元素要设置以下属性： data-toggle = "collapse" data-target = "#id" 或者链接的href代替此属性 href="#id" 触发下拉元素代码示例： <
，达到根据屏幕大小显示不同布局的效果。...页面支持根据不同设备屏幕大小进行自适应布局，具体的样式控制依赖于引入的 css/style.css 文件，同时引入了 jQuery 库，方便后续进行脚本控制。 代码详细解释 1.....row 元素的显示方式设置为块级元素，使得卡片描述和图片各占一行。...三、工作流程▶️ 实现自适应页面效果的整体思路 上述 HTML 和 CSS 代码实现自适应页面效果的核心思路是利用媒体查询（Media Query）结合 HTML 结构与 CSS 样式控制，根据不同的屏幕宽度调整页面布局和元素样式...细节优化：根据测试结果，对页面的样式和交互进行优化，如调整元素的间距、字体大小、颜色等，提升用户体验。 测试结果
借助其特点，瀑布流通常被用于展示图片资讯、购物商品、直播视频等多种形式的数据。当瀑布流上下滑动时，由于无限加载的特性，其能展示的数目非常多；大小不一的子元素，也带来了测量绘制的性能消耗。...相关流程如下：瀑布流组件加载流程图示例代码 中使用的是onScrollIndex加载数据。六、固定宽高与长列表不同的，瀑布流布局中各个卡片的高度是不同的，这就对瀑布流布局绘制提出了新的挑战。...瀑布流的卡片高度是由瀑布流卡片自适应瀑布流的宽度得到的，因此卡片的高度无法直接指定。这就会使卡片渲染以后得到的高度与占位符的高度不一致，从而造成卡片的闪烁效果。...瀑布流页面卡片宽高计算逻辑示意图如上图所示，两列瀑布流卡片的宽度 = （屏幕宽度 - 2 * 组件外边距（margin） - 瀑布流组件内边距（gap））/ 2。...瀑布流卡片中图片的高度imageHeight = 图片原始高度 / 图片原始宽度 * 瀑布流卡片宽度。瀑布流卡片中描述性的高度titleHeight根据标题长度不同需设置不同的高度，计算逻辑。
接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果： 目标效果 请通过补充或者修改 css/style.css 中的样式（注意：不要修改元素大小），达到以下效果： 实现卡片（class...：使页面在不同设备上能正确显示，宽度根据设备屏幕宽度自适应....user - card：设置用户信息卡片的宽度为 150px，高度为 100%，将其向左浮动，并使用弹性布局使其内部元素垂直居中显示。...等级和积分信息样式设置 .level, .points：设置等级和积分信息的宽度、文本对齐方式、定位方式、颜色、字体大小、背景颜色、内边距和圆角边框，并防止文本换行。...CSS 代码为这些 HTML 元素添加了样式，包括背景颜色、尺寸、定位、布局、字体样式等，使名片在页面上以特定的样式显示出来。
box - sizing属性用于控制盒模型的计算方式，它有两个主要取值：content - box（默认值）：在这种模式下，元素的width和height只计算内容区域的大小，元素的实际宽度 = width...border - box：在这种模式下，元素的width和height包括了内容、内边距和边框的大小，即元素的实际宽度和高度就是设置的width和height值，内容区域的大小会根据width、padding...其原理是通过设置元素的宽度和高度为0，同时设置不同方向边框的宽度和颜色，将不需要的边框设置为透明，从而只显示出需要方向的边框，形成三角形。...卡片列表：在展示一系列卡片式的内容时，Flex布局能使卡片在一行或一列中整齐排列，并且可以根据容器的大小自动调整卡片的宽度或高度，实现响应式布局。...响应式网页设计：Grid布局的强大之处在于可以通过定义不同的网格模板，在不同的媒体查询条件下（如不同的屏幕宽度），灵活地改变页面元素的排列方式，实现高度响应式的设计，为不同设备的用户提供良好的视觉体验。
固定宽度断点思维模式就像是只有一种尺码的衣服，它无法适应不同设备的屏幕大小。而响应式设计则像是多种尺码的衣服，可以根据设备的屏幕大小自动调整布局和样式。...接下来，我们需要使用媒体查询来实现不同设备上的不同布局和样式。我们可以根据设备的屏幕大小来应用不同的CSS样式，从而实现响应式设计。...默认情况下，元素的伸缩比例为1，表示元素会尽可能地占用可用空间；收缩比例为1，表示元素会在必要时缩小以适应容器；基础宽度为auto，表示元素的初始宽度由其内容决定。...这样，当视口宽度变化时，字体大小会自动调整，既不会太小也不会太大。容器查询：让布局“随遇而安”容器查询是CSS Houdini中引入的一项新特性，它可以让我们根据元素的尺寸来应用不同的CSS样式。...602px时，卡片项会垂直排列；当容器的宽度大于602px时，卡片项会水平排列。
FlexAlign值 主轴对齐效果 应用场景 Start 左对齐 常规列表、表单 Center 居中对齐 居中展示、强调重点 End 右对齐 特定UI元素如操作按钮 SpaceBetween 两端对齐，..., (item: string) => item) 卡片样式分析 宽度设置：.width('48%') 设置每个卡片占容器宽度的48%，加上margin后，每行可以容纳2个卡片。...120 : 80) 根据内容动态设置卡片高度，模拟真实场景中的不同内容长度。...响应式宽度计算 在设置卡片宽度时，需要考虑外边距的影响。...不同高度元素的对齐 当卡片高度不一致时，alignItems属性的设置变得尤为重要： alignItems设置 效果 适用场景 Start 卡片顶部对齐 强调内容顶部信息 Center 卡片垂直居中 视觉平衡
在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。 卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。...本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。 点我预览 ?...放置一张张卡片项，为了设置间距，最常见的就是直接使用一个特定的margin值了，这种方式虽然可以（通过精确计算后确实也可以） 直接设置一个间距，比如统一 margin-left 和 margin-bottom...itemsDOM.appendChild(fragment); } renderList(mockData); 把基础样式放上，这里我们先指定一个特定的...有了某种特定情况下的布局规则之后，接下来还要考虑不同屏幕大小的情况下，怎么调整这个margin值 这个需要结合媒体查询来设定，同时相应的计算规则也可以通过scss来处理 第一种情况是每行3个，n只可能为整数
flex-*-nowrap 不同的荧幕设备不设置包裹元素 flex-*-nowrap 不同的荧幕设备不设置包裹元素 flex-*-wrap 不同的荧幕设备设置包裹元素 flex-*-wrap-reverse...可以在头部元素上使用 .card-title 类来设置卡片的标题 。...em 单位来缩放以符合直属父元素的大小。...to 将轮播指向特定的索引。(与数组相同，从 0 开始). 在目标项目显示前回传给调用者 (e.g., 在 slid.bs.carousel 事件发生之前)。 dispose 销毁一个元素的轮播。...内联表单需要在 元素上添加 .form-inline 类 所有内联表单中的元素都是左对齐的 在荧幕宽度 小于 576px 时为垂直堆叠，如果荧幕宽度 大于等于 576px 时表单元素才会显示在同一个水平线上
媒体查询 根据设备特性应用不同的样式 需要针对特定设备类型优化的场景 2.2 HarmonyOS中的屏幕适配策略在HarmonyOS NEXT...中，屏幕适配主要考虑以下几个方面：尺寸适配：根据屏幕尺寸调整组件大小和布局方向适配：适应横屏和竖屏模式的切换密度适配：针对不同屏幕密度优化显示效果比例适配：处理不同屏幕比例下的内容展示3....案例分析：响应式卡片的结构3.1 组件结构概述我们的案例实现了一个响应式卡片组件，它能够根据屏幕宽度自动调整其宽度和内容对齐方式。...'40%' : '100%') // 平板及以上宽度显示为40%宽度同样使用三元运算符实现条件渲染：当屏幕宽度大于720时，卡片宽度为父容器的40%当屏幕宽度小于等于720时，卡片宽度为父容器的100%...通过分析响应式卡片的结构和模拟屏幕尺寸的实现，我们了解了如何创建能够适应不同设备的界面布局。
您所要做的就是将半径设置为元素宽度或高度的一半。 border-radius: 50px; 而且，如果我们想找点乐子，我们还可以利用灵活框模型（在#8 中详细介绍）将文本在圆圈内垂直和水平居中。...例如，如果我们想要一个特定的图像占据 body 元素的整个背景，而不管浏览器窗口的宽度如何？...9.resize 该 resize 属性（CSS3 UI 模块的一部分）允许您指定如何调整 a textarea 的大小。现在除了 IE 和 iOS Safari 之外，所有主流浏览器都支持它。...水平和垂直居中 接下来，我希望我们的卡片在屏幕上完全居中。为此，我们将利用灵活盒模型。 由于我们的页面将只包含这张卡片，我们可以有效地使用该 body 元素作为我们的包装器。...固定正面 参考上图；注意我们卡片的背面是如何默认显示的？这是因为，由于元素在标记中出现的位置较低，因此它会收到较高的 z-index. 让我们解决这个问题。
在HarmonyOS NEXT中，我们可以通过多种方式实现响应式设计： 响应式设计方法 说明 适用场景 百分比布局 使用百分比值设置组件尺寸 需要按比例调整大小的场景 条件渲染 根据屏幕尺寸条件判断显示不同内容或样式...需要在不同设备上显示不同布局的场景 弹性布局 使用Flex相关属性进行弹性空间分配 需要灵活分配空间的场景 媒体查询 根据设备特性应用不同的样式 需要针对特定设备类型优化的场景 2.2 HarmonyOS...中的屏幕适配策略 在HarmonyOS NEXT中，屏幕适配主要考虑以下几个方面： 尺寸适配：根据屏幕尺寸调整组件大小和布局 方向适配：适应横屏和竖屏模式的切换 密度适配：针对不同屏幕密度优化显示效果...案例分析：响应式卡片的结构 3.1 组件结构概述 我们的案例实现了一个响应式卡片组件，它能够根据屏幕宽度自动调整其宽度和内容对齐方式。...'40%' : '100%') // 平板及以上宽度显示为40%宽度 同样使用三元运算符实现条件渲染： 当屏幕宽度大于720时，卡片宽度为父容器的40% 当屏幕宽度小于等于720时，卡片宽度为父容器的100%
在展开态下，由于屏幕的特殊形态，因此产生了如下主要的场景差异： 单页面（布局重排）：屏幕宽度变宽产生了版面布局优化的机会，可以在适当的条件下进行页面版式调整（页面内的元素的位置、大小，同类型数量等发生变化...，当布局的显示大小发生变化时，元素的显示宽度随之发生改变。...相对缩放 布局特点：相对缩放的特点是布局内元素的显示大小不是固定值（比例锁定），而是通过相对参照物的方式来确定其宽或者高的参数，当布局的显示大小发生变化时，元素的大小随之发生改变。...适应场景：适合用卡片式呈现内容的场景，通过卡片的横纵扩展在⼤屏上展示更多内容。 适配规则：可以定义单个组件的宽度规则，随着页面宽度的变化，⾃动计算可以重复的卡片个数。...Gutters是用来控制元素和元素之间的距离关系，可以根据设备的不同尺寸，定义不同的Gutters值作为断点系统中的统一规范。
当此盒式高度按比例调整为其宽度时，我们将有一个致宽尺寸的框。 考虑下图。 盒子被按比例调整大小，其宽度和高度之间的比例是一致的。...通过拥有一致的高宽比，我们可以获得以下好处 整个网站的图像将在不同的视口大小上保持一致。 我们也可以有响应式的视频元素。...当标题有padding-top: 50%时，该值是根据其父元素的宽度来计算的。因为父元素的宽度是200px，所以padding-top会变成100px。...另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有object-fit: cover，用于上传不同大小的图片的情况。请看下面的动图。 请注意，卡片大小的变化和缩略图的长宽比没有受到影响。...蓝色区域是图像的大小，object-fit: contain是重要的，避免扭曲图像。 Responsive Circles 你是否曾经需要创建一个应该是响应式的圆形元素？
Bulma核心概念容器(Containers)容器是Bulma中最基础的布局元素，用于在各种屏幕尺寸上居中内容：```html```Bulma的容器会根据屏幕宽度自动调整最大宽度，非常智能！...但你可以指定特定宽度：```html```这种灵活性让我在设计复杂布局时省了不少力气！...卡片(Card)卡片是展示内容的绝佳方式：```html卡片标题@副标题```卡片组件在显示产品、文章或个人资料时特别有用！...合理使用辅助类Bulma提供了大量辅助类，可以快速调整元素的样式：```html居中文本右对齐文本主色文本```这些辅助类让你能够在不写CSS的情况下快速调整元素样式！2....性能优化尽管Bulma已经相当轻量，但对于生产环境，你可以通过只导入需要的组件来进一步减小文件大小：scss// 只导入需要的组件@import "bulma/sass/utilities/_all";
新拟态设计 业务场景：柔和的交互按钮 新拟态设计是近年来的热门趋势，它通过模拟物体的光影效果，营造一种“柔软浮动”的视觉效果，非常适合按钮、卡片、开关等 UI 元素。...总结：新拟态设计适用于用户操作的按钮、卡片等，能够提升视觉体验，让页面看起来更加现代。 3. 毛玻璃效果 业务场景：登录弹窗或信息卡片 毛玻璃效果能让元素看起来半透明，同时模糊背景，提升整体设计质感。...，45deg 指定渐变角度。...用 clamp() 优化响应式布局 业务场景：容器大小自适应屏幕 为不同屏幕设计容器时，clamp() 是神技。它能限制最小值、最大值，并设置理想值。...理想值：50%，默认情况下尝试占屏幕宽度的一半。 最大值：800px，宽度不会超过 800px。 clamp(最小值, 理想值, 最大值) 的语法让宽度在指定范围内动态调整。
媒体查询允许组件基于视口大小进行调整，但如果我把一个组件放到侧边栏中，如下图所示呢？通过媒体查询响应视口宽度的组件容器查询：我们的救星还是虚假的曙光？...容器查询的基本理论是元素应该基于其父容器的大小而不是视口宽度来改变，如下图所示。...如下图所示，我们可以使用容器查询为特定容器宽度创建设计，但如果我想基于图像大小或比例更改设计呢？...客户几乎在获得CMS访问权限后就添加了一个难以置信的长标题，如下图所示？无法响应同级元素内容变化的卡片Subgrid允许元素响应其自身内容和同级元素内容的调整，帮助我们创建更能适应变化的设计。...毕竟，为未知或意外设计，我们需要考虑内容变化，就像我们之前的Subgrid卡片示例那样，允许卡片响应其自身内容和同级元素内容的调整。
云服务器
ICP备案
实时音视频
对象存储
云直播
