`

HTML5 媒体查询

阅读更多

使用 @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>

 

效果图:

 

 

 

 

  • 大小: 7.5 KB
  • 大小: 39.3 KB
2
0
分享到:
评论

相关推荐

    HTML5媒体查询

    HTML5媒体查询

    H5 media 媒体查询

    在Web开发领域,HTML5(H5)的媒体查询(Media Queries)是一项至关重要的技术,它使得我们能够根据设备的不同特性,如屏幕尺寸、分辨率、方向等,为用户提供更为合适的布局和样式。通过媒体查询,我们可以创建响应...

    html5自适应性响应式Banner幻灯片切换手机js特效源码下载.zip

    1. 响应式设计:利用HTML5媒体查询,使网站适应各种屏幕尺寸。 2. Banner幻灯片切换:通过JavaScript实现动态切换效果,增强视觉吸引力。 3. 触摸优化:针对触屏设备进行交互设计,确保手指操作顺畅。 4. 手机版适应...

    ie兼容媒体查询

    最后,随着HTML5和CSS3的广泛采用,以及新的浏览器如Edge的出现,开发者逐渐摆脱了对IE8的支持。尽管如此,理解如何处理旧浏览器的兼容性问题仍然是一个有价值的技能,特别是对于维护遗留项目或服务大量仍在使用旧版...

    苏宁易购(rem+媒体查询+移动端)

    接着,媒体查询(Media Queries)是HTML5和CSS3引入的重要特性,用于检测设备的特定特性,如视口宽度、设备方向等,并根据这些特性应用不同的CSS样式。媒体查询允许开发者创建适应不同设备或屏幕尺寸的布局,实现...

    html流媒体布局

    通过CSS媒体查询,我们可以根据设备的屏幕尺寸、分辨率等特性调整布局,确保在不同设备上的良好显示效果。例如: ```css @media (max-width: 600px) { video { width: 100%; } } ``` 5. 视频流技术:为了...

    html5.js,html5shiv.js,html5shiv-printshiv.js,css3-mediaqueries.min.js

    CSS3媒体查询是HTML5的一个重要组成部分,它允许开发者根据设备特性(如视口宽度、设备像素比等)来定义不同的样式规则。在不支持媒体查询的老版浏览器中,这个库能够让开发者依然能够利用媒体查询实现响应式设计,...

    andorid-HTML5.zip_android_android html5_html5_html5 android_查询 h

    7. **响应式设计**:考虑到Android设备的屏幕尺寸多样化,HTML5的媒体查询(Media Queries)和Flexbox或Grid布局可以帮助创建适应不同屏幕尺寸的界面。 8. **安全考虑**:在处理敏感信息如用户登录和支付时,必须...

    html5响应式在线影视电影视频播放平台网站模板

    这通常通过CSS3的媒体查询来实现,允许设计师定义在不同屏幕尺寸下的样式规则。响应式设计确保了用户在任何设备上都能获得优化的浏览体验。 3. **视频播放器**: HTML5中的`&lt;video&gt;`标签是实现内嵌视频的关键,它...

    HTML5实现音视频播放器

    总的来说,这个项目涵盖了HTML5媒体元素的使用、CSS3样式设计、JavaScript编程以及用户体验优化等多个核心技能,展示了如何构建一个功能完备且用户友好的网页音视频播放器。通过深入理解和实践这些技术,开发者可以...

    html5简约响应式自媒体个人博客模板

    响应式设计的核心在于媒体查询(Media Queries)和灵活的布局(Flexible Grid)。媒体查询允许开发者根据设备的物理特性,如宽度、高度和颜色等,来应用不同的CSS样式。而灵活布局则通过百分比单位或Flexbox(弹性盒...

    HTML5+CSS3网站设计基础教程_动手实践源代码

    7. **响应式设计**:利用媒体查询(media queries)适应不同设备的屏幕尺寸,实现网页的跨设备兼容性。 8. **章节结构**:从chapter01到chapter10,涵盖了HTML5和CSS3的基础到进阶内容,逐步深入,适合初学者...

    用HTML5开发ios应用

    2. **CSS3**:用于提升用户体验,提供动画、过渡效果、媒体查询等,使应用界面更加美观和响应式。 3. **JavaScript框架**:选择适合的JavaScript框架,如jQuery、Angular、Vue或React,可以提高开发效率和应用性能。...

    新媒体公司HTML5网页模板是一款蓝色清爽的专业媒体公司html5模板下载。_html网站模板_网页源码移动端前端_H.rar

    模板的移动端前端部分表明,它已经考虑到了移动设备的适配,这意味着它可能采用了自适应设计,如媒体查询,以确保在不同屏幕尺寸的设备上都能正常显示和操作。这对于现代媒体公司来说至关重要,因为他们的目标受众很...

    Html,普通页面查询

    通过使用`&lt;meta&gt;`视口标签,以及CSS媒体查询,可以确保页面在不同设备和屏幕尺寸下都能正确显示。 5. 表单处理:HTML表单允许用户输入数据,通常用于搜索功能。`&lt;input&gt;`标签的`type`属性可定义输入类型,如文本(`...

    html5shiv.min.js

    引入顺序通常是先引入`html5shiv.min.js`,然后再引入`respond.min.js`,因为前者解决了HTML5新元素的识别问题,而后者则负责处理媒体查询,这两者结合起来,可以让基于HTML5和Bootstrap3的网站在IE8这样的老版本...

    新媒体公司HTML5网页模板.zip

    利用CSS3的媒体查询,可以实现响应式设计,确保网页在手机、平板电脑和桌面电脑等各种屏幕尺寸上都能完美呈现。 "新媒体公司HTML5网页模板"可能包含以下组件和特点: 1. **首页**:通常设有大图背景、动态滑块或...

    _以HTML 5 CSS3 jQuery为基础的响应式布局网页设计探讨.pdf

    本文通过分析响应式布局网页的设计要求,结合 HTML5、CSS3 和 jQuery 技术的应用特点,对响应式布局网页中的文字设计、图片设计和媒体查询设计的要点进行了研究,并对其中的智能化处理设计方法进行了探讨。...

    html5(视频)

    - **media**:(可选)指定媒体文件适用的媒体查询,可用于根据屏幕大小等条件动态选择媒体文件。 综上所述,HTML5视频的应用提供了极大的灵活性和便利性,但同时也需要开发者注意浏览器之间的兼容性问题,并采取...

Global site tag (gtag.js) - Google Analytics