视口可以分为布局视口、视觉视口和理想视口 2.1 布局视口 （layout viewport） 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。...（如果主轴是x轴则水平居中） space-around 平分剩余空间 space-between 先两边贴边再平分剩余空间（重要） <!...再平分剩余空间 stretch 设置子项元素高度平分父元素高度 <!...子常见属性 3.1 flex 定义子项目分配剩余空间，用flex来表示占多少份数 .item { flex: ; /* 默认值 0 */ } <!...不同的是rem是相对于html元素的字体大小 /* 父元素 为 12px */ div { font-size: 12px; } /* 此时 p 字体大小是 60px*/ p { font-size
但是，使用flex-grow: 1时，flex 项目会平均剩余可用的空间。 ? 你可能想知道，flex 项目之间的空间是如何分配的?嗯，这是个好问题，稍后会回答。...下面是项目在不同视口大小下的行为。...如图所示，在视口宽度大于300px时，宽度为300px，少于 300px，该项目的宽度就被压缩成跟视口一样的宽度。 大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。...根据 CSS 规范： 建议开发者使用 `flex` 简写来控制灵活性，而不是直接使用它的普通属性，因为简写的可以正确地重置任何未指定的组件以适应常见情景。 flex 用例 用户头像 ?...根据CSS规范： 默认情况下，flex 项目不会缩小到其最小内容大小（最长的单词或固定大小的元素的长度）以下。 要更改此设置，请设置min-width或min-height属性。
这个指定的区域可能有固定的宽度和高度，或者可能是一个更具响应性的空间，如根据浏览器视口大小变化的网格区域。...我们的图像比我们的div大得多，如果我们将图像放在div内，它会溢出，如下所示。 我们的目标是防止图像从其容器中爆裂出来，但也要让它舒适地适应其中，object-fit 将帮助我们做到这一点。...使用 object-fit 将图像适应容器 object-fit 属性为我们提供了五个主要的关键字值，以确定我们的图像如何在其容器内显示。...在响应式布局中使用 object-fit object-fit 属性在图像的指定区域的尺寸响应浏览器视口大小的情况下可能最有用。...如何将像视频这样的元素适应到定义的区域（其中一些元素可能被隐藏）可能是一个值得讨论的问题，但毫无疑问，这里有可行的用例。
上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。...min-width 和 padding 在内容较长的情况下，min-width可以扩展按钮的宽度，而水平方向上的padding应该被添加，以实现一个合适的外观按钮。 ?...modal是一个元素，因此它已经具有其父元素的100％宽度，对吗？ 考虑下面为模态设计简化的测试案例。 请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。 ?...那是因为内容不足以达到浏览器窗口高度的长度。 修复后，其外观应如下所示： ? 首先，将body元素作为flexbox容器，然后将其最小高度设置为视口高度的100％。...最大宽度/高度和视口单位的流体比率 为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。 现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。 ?
简介 根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...视口单位基于页面的根元素，而百分比则基于它们所在的容器。因此，它们彼此不同，但各自都有各自的用处。 视口单位的用例 字体大小 ? CSS 视口单位非常适合响应式排版。...2.第二种解决方案：Flexbox和视口单位（推荐） 通过将100vh设置为body元素的高度，然后可以使用flexbox来使main元素占用剩余空间。...一个子元素，即使父元素的宽度受到限制，它也会占据视口100％的宽度。 考虑下面： ?...纵横比 我们可以使用vw单位创建响应元素，以保持其纵横比，而不管视口大小如何。 首先，需要先确定所需的纵横比，对于此示例，使用9/16。
px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。...padding-top为百分比来实现，长宽自适应的长方形： 设置样式让其自适应： .trangle{ height:0; width:100%...四、自适应场景下的rem解决方案 1. rem单位 首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。...与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。...发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。
在这种情况下，要么我们将有一个空的空间，要么项目将扩展以填满可用的空间。考虑下图： 在第一种情况下(Case 1)，文章太宽，会导致封面变形。...然后，再告诉浏览器，如果父元素的宽度等于或大于500px，它应该以不同的方式显示。对于700px查询也是如此。这就是CSS容器查询的工作原理。...此外，我们可以在任何想要的地方定义它们，这意味着如果需要，我们可以在顶级容器上进行查询。现在大家已经理解了CSS容器查询的基本思想，在看看下面图片加深一下映像。 在左边，这是一个正在调整大小的视口。...注意我是如何将每个变体映射到一个特定的上下文，而不是一个视口。为了进一步证明这一点，我们配合 CSS网格一起使用时，组件的行为会有何不同。...当有足够的空间时，清单将展开并显示每个用户的名称。聊天列表的父元素可以是动态调整大小的元素(例如:使用CSS视口单元，或CSS比较函数)。
因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。 让我们看看一个例子。 在下面的 CodePen单步执行试试。...Em 继承的例子 如果我们的根元素字体大小为 16px (通常是默认值) 一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。...我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。...例如，如果用户缩放文本非常高，您的布局可能需要从两列到单个列调整，因为它可能会在较小的移动设备上显示。 如果您的断点在固定的像素宽度，只有不同的视口的大小可以触发它们。...但是基于 rem 的断点他们将响应不同的字体大小。 不要使用 em 或 rem : 多列布局 布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。
wrapper元素可以防止子项超出其边界。 考虑下图： ? 我们这里有aside和main元素，它们被放在了wrapper 元素中。当然，.wrapper元素有一个宽度。...要考虑的重要事项是在左侧和右侧添加padding。 当视口大小小于 wrapper 的最大宽度时，这将导致 wrapper 边缘粘在视口上。...，即使视口的大小小于最大宽度。...我们可以向其添加背景颜色或图像。 在其中，wrapper可防止内容占据视口的整个宽度。 ? 主内容需要添加 wrapper 吗？ 这要看情况。 让我们探讨两种最常用内容区间的设计。...然而，继承的属性如颜色(color)和字体(font)却能照常影响到子元素。
由于你子 DIV 并没有指定宽度，那它就是 100%，也就是与父 DIV 同宽，但这与继承无关，高度自然也没有继承一说。...---- 有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度 ？...四、vh 与 vw 视口 在桌面端，指的是浏览器的可视区域； 在移动端，它涉及 3个 视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport...（理想视口）。...视口单位中的 “视口”，桌面端指的是浏览器的可视区域；移动端指的就是 Viewport 中的 Layout Viewport。
flex方案: align-items: center; 复制代码 子Q：文字大小根据屏幕大小自适应 结合响应式rem那些 四、经典布局 1、两列布局——左边固定，右边自适应 flex属性 flex...（1）flex-grow：定义项目的的放大比例 默认为0，即使存在剩余空间，也不会放大； 所有项目的flex-grow为1：等分剩余空间（自动放大占位）； flex-grow为n的项目，占据的空间（放大的比例...（3）flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间 默认值为auto，即项目原本大小； 设置后项目将占据固定空间。...width: 100%; height: 100%; } .box { margin-left: 10px; /* vw是视口的宽度...， 1vw代表1%的视口宽度 */ width: calc(100vw - 20px); /* 宽度的一半 */ height: calc(50vw -
两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式。...有三种常用方式可以达到两列自适应布局 float + BFC： 左元素在没有固定宽度的情况下设置浮动，因此宽度由内容撑开；右元素激活 BFC（这里采用 overflow:hidden）后，可以防止被浮动元素盖住...，且正是为了防止被盖住，右元素宽度才会由默认的撑满屏幕变为撑满剩余部分。...flex 只有一个值时，设置的是 flex-grow，代表弹性子元素对父元素剩余空间的分配，因为不设置的时候默认是 0，所以这里只有设置了 1 的主列参与分配剩余空间，从而实现宽度自适应。...，与 wrap 没有任何嵌套关系 wrap 区域的高度通过设置 min-height，变为视口高度 footer 要使用 margin 为负来确定自己的位置 在 main 区域需要设置 padding-bottom
在 CSS 中，1em 等于当前元素的字号，其准确值取决于作用的元素。 浏览器会根据相对单位的值计算出绝对值，称作计算值（computed value）。...# 视口的相对单位 相对于浏览器视口定义长度的视口的相对单位。 视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。...视口的相对单位 vh: 视口高度的 1/100 vw：视口宽度的 1/100 vmin：视口宽、高中较小的一方的 1/100（IE9 中叫 vm，而不是 vmin） vmax：视口宽、高中较大的一方的...1/100 vmin 取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。...这样做的好处在于元素能够在这两种大小之间平滑地过渡，这意味着不会在某个断点突然改变。当视口大小改变时，元素会逐渐过渡。 不过对于过大或者过小屏幕上，可能会有不适，不过可以通过 calc 修正。
这意味着 CSS 将查找 HTML 树并找到最近的一个祖先，「该祖先也使用了这些值之一」。如果找不到，则绝对定位元素将相对于视口定位。...当我们设置width: 2000px时，我们肯定能到一个宽度为 2000 像素的元素，即使它已经超过当前视口的宽度。 ❝然而，在 Flexbox 中，width属性的实现方式不同。...因此，子元素的大小被缩小，以「适应空间」。 这是 Flexbox 哲学的核心部分。「事物是流动和灵活的，可以根据世界的限制进行调整」。 6....如果子元素太大而无法容纳，flex-grow没有影响，因为没有额外的空间可分配。 防止缩小 有时，我们不希望 Flex 子元素缩小。 让我们看一个例子： 当容器变窄时，我们的两个圆形被挤变形了。...原因是：除了假设大小之外，Flexbox 算法还关心另一个重要的大小：「最小大小」。 ❝Flexbox算法拒绝将子元素缩小到其最小大小以下。
最近查阅了一些帖子，发现了一个极其强大的方法，其兼容性有待提高~~（但已有相关的的Polyfill方式） 按需加载 // 全部加载 import 'ccharts' // 按需加载 只加载需要使用的组件...，防止重复加载！...该方式通过监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口信息，再判断是否在视口之内。...，如果没有根元素（即直接相对于视口滚动），则返回null； boundingClientRect：目标元素的矩形区域的信息； intersectionRect：目标元素与视口（或根元素）的交叉区域的信息...）； rootMargin：用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小； threshold：决定了什么时候触发回调函数 var io =
: 300px; width: 300px; background: #e599f7; } 其 HTML 结构也是固定的，就是一个父级，其宽度继承了 的宽度，还有一个子级，这里是固定的300px...使用calc函数实现 使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。...实现CSS代码如下： .container { /* 这里的 中间 部分的容器最少为视口宽度的 100% - 头部和底部两部分的高度即可完成该功能 */ min-height: calc...Flex方案 实现步骤如下 开启 flex 布局 将子元素布局方向修改为垂直排列 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 设置中间部分容器高度为自适应 实现CSS代码如下：...设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */ min-height: 100vh; } .container { /* 设置 中间 部分自适应 */
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。...（1)、降低图片的大小、选择适当的图片宽度尺寸，压缩图片，选择更小kb的图片格式，以达到最优的显示效果。...对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例...rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度， 而 rgba() 只作用于元素的颜色或其背景色。...自适应的单位有以下几个 百分比：% 相对于视口宽度的单位：ww 相对于视口高度的单位：vh 相对于视口宽度或者高度（取决于哪个小）的单位：Vm 相对于父元素字体大小的单位：em 相对于根元素字体大小的单位
initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。 理想视口：文档宽度和屏幕宽度一致。...视觉视口的宽度 = 理想视口宽度 / 缩放比例 参考链接：https://blog.csdn.net/leman314/article/details/111936863 13. px px的大小在不同屏幕上是一样的...21. object-fit object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。...35. fixed fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。...可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
在下面的动图中，我们的视口保持不变，也没发生页面滚动，但页面自行发生了巨大的位移。 作为访问该网站的用户，我们可能「无法确定页面何时完成加载」。...每个图像源后面的数字（如480w、800w、1200w）表示图像的宽度。 sizes属性指定了在不同视口宽度下应该使用的图像大小。通过使用媒体查询，可以在不同的视口尺寸下为图像指定不同的大小。...它们可以防止元素变得比指定的大小更小，无论它包含多少内容。...可以使用任何长度单位（如像素）或百分比来指定大小，例如： div { min-height: 300px; min-width: 400px; } 这种解决方案适用于不需要响应式大小而是固定高度或宽度的元素...如果广告槽接受多个尺寸，请为最大或最小尺寸预留空间。 某些类型的广告无法免受布局偏移的影响。流体广告槽会根据接收到的内容自动调整其大小，为广告创作者提供更大的创作自由度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
