文章目录
媒体查询
媒体查询（Media Query）是CSS3中的一个重要特性，它允许开发者根据设备的特定条件（如视口宽度、设备像素比、方向等）来应用不同的样式规则。这使得网页能够根据不同的设备和屏幕尺寸进行自适应布局，从而提供更好的用户体验。
语法
媒体查询的基本语法如下：
css
@media media-type and (media-feature) {
/* CSS样式规则 */
}media-type：指定媒体类型，如screen（屏幕）、print（打印）等。media-feature：指定媒体特性，如width（视口宽度）、height（视口高度）、orientation（方向）等。
示例
以下是一些常见的媒体查询示例：
根据视口宽度应用不同的样式
css
/* 当视口宽度小于等于600px时应用这些样式 */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* 当视口宽度大于600px且小于等于900px时应用这些样式 */
@media (min-width: 601px) and (max-width: 900px) {
body {
background-color: lightgreen;
}
}
/* 当视口宽度大于900px时应用这些样式 */
@media (min-width: 901px) {
body {
background-color: lightyellow;
}
}根据设备像素比应用不同的样式
css
/* 当设备像素比大于等于2时应用这些样式（例如Retina屏幕） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
img {
background-image: url('high-res-image.jpg');
}
}根据方向应用不同的样式
css
/* 当设备处于横屏模式时应用这些样式 */
@media (orientation: landscape) {
body {
background-color: lightblue;
}
}
/* 当设备处于竖屏模式时应用这些样式 */
@media (orientation: portrait) {
body {
background-color: lightgreen;
}
}使用场景
媒体查询广泛应用于响应式网页设计中，以实现以下目标：
- 根据不同的屏幕尺寸调整布局和样式。
- 为不同的设备（如桌面、平板、手机）提供优化的用户体验。
- 根据设备的特性（如方向、像素比）应用特定的样式。
通过使用媒体查询，开发者可以创建更加灵活和自适应的网页，从而满足不同用户的需求。
浏览器一帧的渲染过程
在浏览器中，一帧的渲染过程涉及多个步骤，这些步骤共同协作以呈现流畅的用户体验。以下是一帧中浏览器主要执行的任务：
- 处理用户交互：接收并处理用户的输入事件，如点击、滚动等。
- JavaScript解析执行：执行JavaScript代码，这可能包括DOM操作、事件处理等。
- 帧开始：处理窗口尺寸变更、页面滚动等。
- requestAnimationFrame：调用requestAnimationFrame回调，确保动画在下一帧之前更新。
- 布局：计算页面中元素的位置和大小，构建布局树。
- 绘制：遍历布局树，将元素绘制到屏幕上。
为了避免卡顿，开发者应尽量减少每一帧的工作量，确保渲染过程在16ms内完成。