2025年媒体查询针对容器（2025年媒体查询的使用包含了什么）
2022年你不知道的CSS新特性
1、颜色函数（ColorFunctions）CSSColorModuleLevel5新增了两个有关颜色的函数：color-mix（）和color-contrast（），并且扩展了之前存在的其他颜色函数（例如rgb（）、hsl（）、hwb（）等）的相关语法。之前我们定义一个颜色，需要明确的指定每一个通道的绝对颜色。
2、Accentcolor 支持多种 input 控件元素，包括但不限于复选框、单选按钮、滑块等。开发者可以根据需要为这些控件设置自定义颜色。学习和实践意义：掌握新特性：学习和实践 accentcolor 对于前端开发者来说很有意义，因为这是 CSS 的一个新特性，掌握它有助于提升开发技能和网页设计的灵活性。
3、对于文本的细节调整，CSS提供了：first-letter伪元素，专门用于修饰段落中的第一个字母，为文本添加个性化的装饰。最后，我们不能遗漏：placeholder和：selection伪元素。前者用于设置输入框的占位符样式，后者则用于显示用户在文本框中进行选择时的样式效果。
4、Accent-color 是 CSS 2022 年推出的一个新属性。它能修改 input 默认控件的颜色，兼容性也不错。Accent-color 支持的 input 控件元素如下：链接 1： 示例 1 链接 2： 示例 2 链接 3： 示例 3 链接 4： 示例 4 在黑暗模式下，也能适配。
5、Chrome 98 Beta 发布：新增颜色渐变矢量字体 COLRv1 等新特性 2022年1月10日起，Chrome 98正式转为Beta版，此版本带来了多项有趣且实用的功能，其中最引人注目的是对COLRv1颜色渐变矢量字体的支持，以及Origin试用中的视频区域捕获功能。
前端常见的页面自适应布局方案
1、流式布局（Fluid Layout）：核心原理：使用百分比单位（%）来表示长度和宽度，使页面元素能够随着浏览器窗口大小的变化而相应地调整尺寸。优点：简单直观，易于实现。缺点：对于某些复杂布局，可能难以精确控制元素尺寸。
2、前端瀑布流布局是一种常见的网页布局方式，通常用于展示图片、文章等内容，在不同屏幕尺寸下可以实现自适应。因此，前端瀑布流布局是可以实现自适应的。在实现自适应的前端瀑布流布局时，可以使用 CSS 的弹性布局（flexbox）或网格布局（grid）等技术，从而使布局能够根据屏幕尺寸自动调整。
3、流式布局定义：流动网页布局，也称为流体网页布局，其实现方法则是大多数组件都设成百分比宽度，并且根据用户的屏幕分辨率自适应。特点：能够根据用户的屏幕分辨率进行自适应调整。 弹性布局定义：当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。
领库编辑器怎么实现的自适应屏幕?
领库编辑器自适应屏幕的实现方式主要通过响应式布局和媒体查询来实现。详细解释： 响应式布局 领库编辑器采用响应式布局设计，这意味着编辑器的界面元素会根据屏幕的大小和分辨率自动调整尺寸和布局。通过CSS的媒体查询和流式布局，编辑器可以适应不同宽度的设备，确保内容在不同屏幕尺寸下都能正常显示。
这个可以看排版侠编辑器，排版侠编辑器排版好的文章复制粘贴到公众平台，素材管理正文里面，然后预览就可以了，预览都是自适应屏幕的，都是看到手机样式。
css如何控制不同窗口大小下页面自适应
1、CSS可以通过媒体查询、弹性布局、自适应宽度和高度设计以及利用CSS3的新特性等方法控制不同窗口大小下页面的自适应。媒体查询：媒体查询是CSS实现自适应布局的核心技术之一。它允许开发者根据屏幕尺寸、设备类型、分辨率等条件来应用不同的CSS样式。
2、其中一种方法是利用vh单位设定div的高度，vh代表视窗高度的百分比，1vh即为视窗高度的1%。若要将一个div的高度设置为视窗高度的一半，可以使用如下CSS代码：.div-class{height：50vh；}。此外，设置div的宽度为100%，则该div会随浏览器窗口尺寸变化而按比例调整大小，以适应不同的屏幕尺寸。
3、CSS自适应屏幕写法 百分比宽度：使用百分比宽度来定义元素的尺寸，使其能够根据父容器或视口的宽度进行自适应。例如，width： 50%； 会使元素的宽度为其父容器宽度的一半。视口单位：使用视口单位（vw， vh， vmin， vmax）来定义元素的尺寸，这些单位基于视口的宽度或高度。
4、在网页设计中，我们经常需要让元素的宽度和高度根据浏览器窗口大小自适应调整。这可以通过CSS的百分比单位来实现。具体来说，设置的宽度和高度属性为100%，可以让它们跟随浏览器窗口的宽度和高度进行调整。
5、通过设置根元素的字体大小，可以控制整个页面中rem单位的大小。应用：通过调整根元素的字体大小，可以实现页面在不同屏幕尺寸下的自适应布局。例如，在较小的屏幕上，可以减小根元素的字体大小，从而使页面元素整体缩小，以适应屏幕尺寸。
6、为了确保图片在不同屏幕大小下都能完美适应且不出现滚动条，同时保证图片不失真，可以采用CSS的百分比布局。首先，设置HTML和body元素的overflow属性为hidden，这样可以防止内容溢出导致滚动条出现。接下来，创建一个名为bg的div，将其宽度和高度设置为100%，并使用position属性将其固定在页面的顶部。