进度条会跑到容器外： .loading-thumb { left: 100%; } 这是正常的情况，100% 是从进度条的末端开始的，而进度条本身也有自己的宽度，所以实际宽度会大于容器的宽度。...动态分割器 考虑下图，我们在两个区域之间有一个行分隔符。 在移动端上，这个分隔符应该变成水平的，如下图： 我的解决方案是使用一个边框和flex。...它的值是 0，因为我们使用的是一个CSS边框 (var(--breakpoint) - 100%) * 999 是一个个切换器，根据视口宽度在 0px或 100% 之间切换。...min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999 的计算值之间进行比较,这会得到一个非常大的正数或负数。...9999 是一个很大的数字，这样 min 的值都是 8px 间距 有时，我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CS函数就不一样了,我们只需要设置一次。
Step2: 消除DPR差异 3. Step3: 动态设置 html 标签根字体大小 4. Step4: 将设计图中的尺寸换算成 rem 5. Step5: 媒体查询设置body字体大小 6....本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。 1....Step2: 消除DPR差异 消除DPR差异只需要将布局视口大小设为设备像素尺寸，可以通过修改viewport参数来实现。...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。...Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小
移动端适配原理在学习移动端适配原理之前，我们先了解一下在 VSCode 中自动生成的 head 标签中的 viewport。viewport 可以翻译为 视区 或者 视口。...如果要实现浏览器适配移动端，首先我们要统一标准视口。...单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。flex 布局主要是设置 flex 容器的对齐方式和 flex 项目的大小形态，上图中的四个概念十分重要。...，给容器设置属性用来决定容器中的项目如何排列，如主轴方向、是否换行、主轴和交叉轴的对齐方式等，可以理解为宏观的设定。...媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。
本文不再对常见概念进行说明，如：设备分辨率、DPR、单位、视口、meta:viewport等，如果对这类概念不甚了解，可以先去搜索引擎查询了解下。 1....Step2: 消除DPR差异 消除DPR差异只需要将布局视口大小设为设备像素尺寸，可以通过修改viewport参数来实现。...Step4: 将设计图中的尺寸换算成 rem Step3进行了html根节点文字大小设置，然而意义何在？自然是为了开发者计算的方便。...Step5: 媒体查询设置body字体大小 其实完成了上述Step1～4，已经基本完成了移动端的适配工作，然而，有些情况下，如资讯类文字较多的页面，如果在大屏设备上展示，文字会过大，影响阅读体验，此时需要调整文字大小...，使得大屏展示更多的文字内容。
editors=1100 装饰元素 如果你需要在部分项目中添加装饰元素，大多数时候，元素需要响应，并且可能需要根据视口大小进行不同的定位，你会怎么做？ 如下示例效果： 两侧有两个装饰元素。...editors=0100 动态线分隔符 今年早些时候，我写了一篇关于我正在开发的 UI 的有趣 CSS 解决方案的文章。 考虑下图，我们在两个部分之间有一个行分隔符。...它为零，因为我们使用的是 CSS 边框。 (var(--breakpoint) - 100%) * 999 根据视口宽度在 0px 或 100% 之间切换。...min() 函数在 8px 和 calc((100vw - 4px - 100%) * 9999) 的计算值之间进行比较，这将导致非常大的正数或负数。...间距 有时，我们可能需要根据视口宽度更改组件或网格的间距。不带 CSS 比较功能！我们只需要设置一次。
这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。 简单的这些元素主要用来设置元素尺寸，如容器大小，字体大小，内距，外距等等 。...如果换做min()，那么就不能在小的视图中控制字体了。...与上一个示例类似，渐变大小应该在小视图和大视图之间有所不同。...editors=1100 容器宽度 如果有一个容器，它的宽度应该是它父容器的80%，但不能超过780px，你会用什么?...editors=1100 Grid Gap 在一个使用风格布局的界面上，如果我们想根据视口大小来调整网格之间的间距，使用 clamp() 是很容易做到的： .wrapper { display:
utm_source=CSS-Weekly&utm_campaign=Issue-538&utm_medium=web 2、容器查询和字体设计 Robin Rendle 解释了如何在字体大小、行高和尺寸之间创建排版关系...utm_source=CSS-Weekly&utm_campaign=Issue-538&utm_medium=web 4、使用 :has() 解决：长文本中的垂直间距 Liam Johnston 展示了如何使用...:has() 来管理不同排版元素（如标题、段落、列表等）之间的垂直间距。...utm_source=CSS-Weekly&utm_campaign=Issue-538&utm_medium=web 2、clamp() 计算 一个方便的在线工具，用于计算基于视口的动态值。...创建了一个令人惊叹的示例，展示了 CSS 容器查询的强大功能。
1.相机变换部分 上图左数的两个步骤，对于一个世界坐标系空间中的物体，我们将虚拟摄像机相机旋转和移动到需要的角度上，然后把物体的顶点坐标从世界坐标系转到相机坐标系中 2.投影变换部分 中间的步骤，把那个横着的金字塔形视体压缩为下面规范视体的形状...计算机中的相机不会发生散焦等情况，因此在正交投影下调整焦距的效果类似于相机在移动 那么最后如何将正交视体变换为规范视体呢，很显然这也是一个缩放和移动仿射矩阵的情况，只是这一次我们无需忽略Z轴的值了，三轴都要进行移动和变换...相机变换 再回到流程图中，这就到了最后的一个变换部分了，前面的变换都假设物体已经稳稳当当地放在视体中了，但实际上我们需要利用变换让相机坐标移动到需要的位置并让视体对准我们要的物体，再把物体的坐标从世界坐标系转换到相机坐标系中提供给上面的变换...，我们真正需要的其实是顶点之间z的深度顺序不变且能保留在视体内，实际上的z值并不重要，因此我们构造出了下面的矩阵，后面是乘法的效果。...在上面的伪代码里，正交透视和透视矩阵的乘积合成为了完整的透视投影矩阵，这个矩阵在不同的API中有一些差别，例如OpenGL中对其每个值视体两个面的z坐标取了绝对值，但是整体的思路都是一样的 ?
视口单位基于页面的根元素，而百分比则基于它们所在的容器。因此，它们彼此不同，但各自都有各自的用处。 视口单位的用例 字体大小 ? CSS 视口单位非常适合响应式排版。...从容器中挣脱出来 我注意到一个用例最适合编辑版面。 一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面： ?...垂直和水平间距 我想到的另一个有趣的用例是使用视口单位来表示元素之间的间距。这可以与margin、top、bottom和grid-gap等值一起使用。...当视口较小（移动）时，通常会减少padding 。 通过使用vmin，我们可以在视口较小尺寸（宽度或高度）的基础上获得合适的顶部和底部 padding。...vw = (Pixel Value / Viewport width) * 100 视口宽度用于估计像素值与所需vw单位之间的比率。
「如果大家对这些概念熟悉，可以直接忽略」 同时，由于阅读我文章的群体有很多，所以有些知识点可能「我视之若珍宝，尔视只如草芥，弃之如敝履」。以下知识点，请「酌情使用」。...❞ CSS 布局算法 CSS 有不同的模式，确定它如何在页面上布局元素。这些模式通常被称为布局算法或布局模式。...❝子元素将「默认」根据以下两个规则定位： 主轴(Primary Axis)：子元素将「紧密」排列在容器的「起始位置」。 交叉轴(Cross Axis)：子元素将「伸展」以「填充整个容器」。...Flexbox算法可能会「将元素收缩到低于这个期望大小」，但「默认情况下，它们将始终按比例缩放，保持两个元素之间的比例」。 如果我们不希望元素按比例缩小,可以使用flex-shrink属性。...间距 ❝gap允许我们在每个 Flex 子元素之间创建空间。 ❞ 这对于诸如导航标题之类的东西非常有用： 自动边距 margin属性用于在特定元素周围添加空间。
，即使视口的大小小于最大宽度。...margin 上面我们说到不建议使用简写版本来居中wrapper 元素: .wrapper { margin: 0 auto; } 虽然它可以工作，但当页面上有多个wrapper ，并且需要在它们之间添加间距时...在上面的HTML中，两个wrapper之间有一个元素。 在这里使用!important很好，因为实用程序类的要点是强制属性，通过添加!important，我们可以确保做到这一点。...超出该范围的任何字符都会使阅读更加困难。 ? 为避免上述问题，可以使用wrapper来防止文本长度变得过长并在移动设备中增加间距。...对wrapper使用 CSS 变量 只用一种尺寸的wrapper很少。 wrapper的宽度可以小也可以大，具体取决于内容。
大网格和小网格 有时候我们觉得连续的网格，不好肉眼测量。此时我们可以引入大网格。有点类似刻度尺，没隔几个小的刻度，会绘制一个长一点的大刻度。 即每 n x n 个小格子组成一个大格子。...网格样式 除了网格线，还有另一种网格的表示方式：用圆点表示。 点的位置对应原来网格线与线之间的交点位置。 该效果常见于白板工具。...为了解决网格密度过大的问题，通常我们有两种做法。 （1）视口上的网格间距小到一定程度，就不再显示。Figma 是这么做的。...// 最小间距，小于这个要把间距放大 const MIX_SPACING_IN_VIEWPORT = 8; // 视口上的网格尺寸 const gridSpacingInViewport = zoom...// 最小间距，小于这个要把间距放大 const MIX_SPACING_IN_VIEWPORT = 8; // 视口上的网格尺寸 let gridSpacingInViewport = zoom *
1）先画一个矩形板和三角形板 ——点击草图，草图绘制，在上视基准面上绘制一个中心矩形和三角形 ——标注尺寸，矩形长度100，三角形两直角边长度也是100，两个图形间距30 ——拉伸凸台基体，距离30，...M6，终止条件完全贯穿 ——点击位置栏，鼠标移动到零件视窗需要打开的面，点击左键确认打开位置，可通过中心原点调整精确打孔位置 ——下面要打个螺纹孔，操作基本如上，只是此时选择的直螺纹孔、GB、底部螺纹孔...、M6、完全贯穿 2 线性阵列 之前草图中也学习到了线性阵列，特征中的线性阵列意思差不多，就是将特征或实体进行阵列复制的方法。...——点击线性阵列下方三角形按钮，弹出菜单中选择圆周阵列，属性栏中，点击激活方向，再选择刚刚新建的基准轴，点击特征和面的空白栏，激活选择，然后选择零件视窗中的螺纹孔，设置实例数量为6，选择等间距，360度排列...注意，以上零件是分两部分的，左边一个矩形板，右边一个三角板，他们之间并不相连，在Solidworks中，不连续的两个部分称为不同的两个实体，在设计树中找到实体栏，点击旁边三角形按钮，可见有两个实体（之前说的草图中的裁剪实体
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了...ideal viewport（完美视口）:完美适配移动设备的viewport，它的宽度等于移动设备的屏幕宽度。有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。...###位图像素### 一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。...设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。% 基于当前字体尺寸的百分比行间距。...100%;*/ } 我是超大字体 从上图，我们发现字体和父元素上下之间有点小间距
维基百科①的解释为： 在计算机图形学理论中，当将一些对象渲染到图像时，存在两个类似区域的相关概念。(视口和窗口) 视口是一个以特定于渲染设备的坐标表示的区域（通常为矩形）。...6 移动端跨屏适配中的 viewport 移动端的屏幕宽度差距比较小（4-8 英寸），UI 页面通常也会保持一致的布局方式，只是文字、图标、大图片等可能会根据业务需要做一些定制化的处理。...注：Pad 设备虽然也是移动设备，但是因为屏幕足够宽，所以现在多数产品（如某宝）的方案都是访问 PC 站点了。...（css 中的 px 取值需按一倍屏 UI 稿来写）； ●布局方案灵活使用相对单位%/float/flex 等，以保证布局的横向伸缩和容器内各元素的大小间距符合预期； ●组合包裹相关元素，并相对某一方向做定位...在滚动到视图中之前，视口外部的内容在屏幕上不可见。 ●当前可见的视口部分称为可视视口。这可以小于布局视口，例如当用户进行缩放缩放时。该布局视口保持不变，但视觉视口变小。
布局容器 MDUI 需要为页面内容和网格布局系统包裹一个 .mdui-container 容器。我们提供了两个此作用的类。....mdui-col-md-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。 .mdui-col-lg-[1-12] 在大屏幕及以上的设备上生效，如台式电脑。...默认在列之间会有 16px 的间距，只需在 .mdui-row 上添加类 .mdui-row-gapless 即可消除列间距。...示范： 不消除列间距： 消除列间距： 可以很明显地看到，文字列与列之间的文字变得紧凑了。 <!...不偏移： 偏移：2列 官方示范： 举个合适的例子，我们想让右边的方块向左移动两列，以沾满12列 这样就可以了！
但在菜单栏，或者一些图标的横向排列时，用起来特别方便，一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)； ---- svg 与 convas 的区别...上下相连的两个盒子之间的空白，需要相互抵消时。如 15px + 20px 的 margin，将得到 20px 的空白。 何时应当时用 padding 需要在 border 内测添加空白时。...上下相连的两个盒子之间的空白，希望等于两者之和时。如 15px + 20px 的 padding，将得到 35px 的空白。...的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题） ---- 阐述一下CSS Sprites 将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image...视口单位中的 “视口”，桌面端指的是浏览器的可视区域；移动端指的就是 Viewport 中的 Layout Viewport。
这是另一回事，但尽量使用 flex-wrap 来避免意外的布局行为（在我们的例子中，是水平滚动）。 2.间距 我们开发者需要考虑不同的内容长度。这意味着，间距应该添加到组件中，即使它看起来不需要。...使用 justify-content:space-between 在一个 flex 的容器中，我们可能会使用 justify-content 来使子项目之间有一定的间距。...每个项目之间的间距不是 gap 或 margin，它之所以存在是因为容器有 justify-content: space-between。...，这在小的视口尺寸上会出现问题。...布局移动发生的原因是为滚动条保留了一个空间。 Scrollbar Gutter 是内边框边缘和外填充边缘之间的空间。 对于经典滚动条，Scrollbar Gutter 的大小与滚动条的宽度相同。
设置文本的阴影效果 line-height 设置文本行高 overflow 设置文本（容器内部内容）溢出的控制方式 letter-spacing 设置字符之间的间距 word-spacing...设置词语之间的间距 word-break 设置文本自动换行的方法 1. text-align：必须用于块状元素，如，。...可以通过添加多组值来设定多重阴影，达到特殊效果，多组值之间用逗号隔开。部分老浏览器版本不支持该属性（IE9及以下），但这并不产生大的影响。...8. letter-spacing：设置单个字符之间的间距。指定的间距将被添加到字符之后，通常以字号为参考，使用相对单位来控制间距。可以使用负值。...9. word-spacing：设置单个词语之间的间距。判断单词或词语的依据是文本间的“空格”，指定的间距将被添加到单词或词语之后，但最后一个词除外。通常以字号为参考，使用相对单位来控制间距。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
