使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
浏览器支持：
style.css
/* CSS Document */
.test{ width:100%; height:400px;}
/*下面的样式会在可视区域的宽度小于 599px 的时候被应用。*/
@media screen and (max-width: 599px) {
.test {
background: #f60;
}
}
/*下面的样式会在可视区域的宽度大于 901px 的时候被应用。*/
@media screen and (min-width: 901px) {
.test {
background: #06f;
}
}
/*你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。*/
@media screen and (min-width: 600px) and (max-width: 900px) {
.test {
background: #f06;
}
}
demo.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>CSS3 媒体查询</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="test"> </div> </body> </html>
demo2.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="basic.css"> <link rel="stylesheet" media="screen and (max-width: 599px)" href="max599.css" /> <link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" href="min600max900.css" /> <link rel="stylesheet" media="screen and (min-width: 901px)" href="min901.css" /> <title>CSS3 媒体查询</title> </head> <body> <div class="test"> </div> </body> </html>
效果图：
相关推荐
HTML5媒体查询
在Web开发领域，HTML5（H5）的媒体查询（Media Queries）是一项至关重要的技术，它使得我们能够根据设备的不同特性，如屏幕尺寸、分辨率、方向等，为用户提供更为合适的布局和样式。通过媒体查询，我们可以创建响应...
1. 响应式设计：利用HTML5媒体查询，使网站适应各种屏幕尺寸。 2. Banner幻灯片切换：通过JavaScript实现动态切换效果，增强视觉吸引力。 3. 触摸优化：针对触屏设备进行交互设计，确保手指操作顺畅。 4. 手机版适应...
最后，随着HTML5和CSS3的广泛采用，以及新的浏览器如Edge的出现，开发者逐渐摆脱了对IE8的支持。尽管如此，理解如何处理旧浏览器的兼容性问题仍然是一个有价值的技能，特别是对于维护遗留项目或服务大量仍在使用旧版...
接着，媒体查询（Media Queries）是HTML5和CSS3引入的重要特性，用于检测设备的特定特性，如视口宽度、设备方向等，并根据这些特性应用不同的CSS样式。媒体查询允许开发者创建适应不同设备或屏幕尺寸的布局，实现...
通过CSS媒体查询，我们可以根据设备的屏幕尺寸、分辨率等特性调整布局，确保在不同设备上的良好显示效果。例如： ```css @media (max-width: 600px) { video { width: 100%; } } ``` 5. 视频流技术：为了...
7. **响应式设计**：考虑到Android设备的屏幕尺寸多样化，HTML5的媒体查询（Media Queries）和Flexbox或Grid布局可以帮助创建适应不同屏幕尺寸的界面。 8. **安全考虑**：在处理敏感信息如用户登录和支付时，必须...
这通常通过CSS3的媒体查询来实现，允许设计师定义在不同屏幕尺寸下的样式规则。响应式设计确保了用户在任何设备上都能获得优化的浏览体验。 3. **视频播放器**： HTML5中的`<video>`标签是实现内嵌视频的关键，它...
总的来说，这个项目涵盖了HTML5媒体元素的使用、CSS3样式设计、JavaScript编程以及用户体验优化等多个核心技能，展示了如何构建一个功能完备且用户友好的网页音视频播放器。通过深入理解和实践这些技术，开发者可以...
响应式设计的核心在于媒体查询（Media Queries）和灵活的布局（Flexible Grid）。媒体查询允许开发者根据设备的物理特性，如宽度、高度和颜色等，来应用不同的CSS样式。而灵活布局则通过百分比单位或Flexbox（弹性盒...
CSS3媒体查询是HTML5的一个重要组成部分，它允许开发者根据设备特性（如视口宽度、设备像素比等）来定义不同的样式规则。在不支持媒体查询的老版浏览器中，这个库能够让开发者依然能够利用媒体查询实现响应式设计，...
7. **响应式设计**：利用媒体查询（media queries）适应不同设备的屏幕尺寸，实现网页的跨设备兼容性。 8. **章节结构**：从chapter01到chapter10，涵盖了HTML5和CSS3的基础到进阶内容，逐步深入，适合初学者...
2. **CSS3**：用于提升用户体验，提供动画、过渡效果、媒体查询等，使应用界面更加美观和响应式。 3. **JavaScript框架**：选择适合的JavaScript框架，如jQuery、Angular、Vue或React，可以提高开发效率和应用性能。...
模板的移动端前端部分表明，它已经考虑到了移动设备的适配，这意味着它可能采用了自适应设计，如媒体查询，以确保在不同屏幕尺寸的设备上都能正常显示和操作。这对于现代媒体公司来说至关重要，因为他们的目标受众很...
通过使用`<meta>`视口标签，以及CSS媒体查询，可以确保页面在不同设备和屏幕尺寸下都能正确显示。 5. 表单处理：HTML表单允许用户输入数据，通常用于搜索功能。`<input>`标签的`type`属性可定义输入类型，如文本（`...
引入顺序通常是先引入`html5shiv.min.js`，然后再引入`respond.min.js`，因为前者解决了HTML5新元素的识别问题，而后者则负责处理媒体查询，这两者结合起来，可以让基于HTML5和Bootstrap3的网站在IE8这样的老版本...
利用CSS3的媒体查询，可以实现响应式设计，确保网页在手机、平板电脑和桌面电脑等各种屏幕尺寸上都能完美呈现。 "新媒体公司HTML5网页模板"可能包含以下组件和特点： 1. **首页**：通常设有大图背景、动态滑块或...
本文通过分析响应式布局网页的设计要求，结合 HTML5、CSS3 和 jQuery 技术的应用特点，对响应式布局网页中的文字设计、图片设计和媒体查询设计的要点进行了研究，并对其中的智能化处理设计方法进行了探讨。...
- **media**：（可选）指定媒体文件适用的媒体查询，可用于根据屏幕大小等条件动态选择媒体文件。 综上所述，HTML5视频的应用提供了极大的灵活性和便利性，但同时也需要开发者注意浏览器之间的兼容性问题，并采取...