CSS媒体查询

2023-10-17 73

一、CSS媒体查询

CSS媒体查询是一种可以根据设备的特性和特定条件来应用不同样式的CSS技术。通过@media 查询,我们可以针对不同设备(如计算机、平板电脑、手机等)和不同的条件(如屏幕宽度、设备方向等)制作响应式布局,使网页在不同设备上都能够良好地展示。

二、媒体类型

1、all:用于所有多媒体类型设备。

2、print:用于打印机。

3、screen:用于电脑屏幕,平板,智能手机等。

4、speech:用于屏幕阅读器。

三、媒体查询作用

1、视口(viewport)的宽度与高度:例如,我们可以使用@media screen and (max-width: 600px) { … }这样的语句来为屏幕宽度小于或等于600px的设备应用特定的样式。

2、设备的宽度与高度:可以根据设备的尺寸应用不同的css样式。

3、朝向 (智能手机横屏,竖屏):通过媒体查询,我们可以设置当设备处于横屏模式时应用一种样式,当设备处于竖屏模式时应用另一种样式。

4、分辨率:我们可以设置当设备的屏幕分辨率低于某一特定值时应用一种样式,当分辨率高于另一特定值时应用另一种样式。

四、媒体查询语法

媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。在CSS中,媒体查询用于根据设备的特性(如屏幕宽度、分辨率等)应用不同的样式。通过使用@media规则,可以根据指定的条件来选择要应用的样式表。

@media not|only mediatype and (expressions) {
CSS 代码...;
}

也可以在不同的媒体上使用不同的样式文件:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css" rel="external nofollow" >

五、媒体查询实例

使用媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

1、在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:

@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}

2、在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧:

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}

3、在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏:

@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

六、浏览器支持

属性 Chrome Edge Firefox Safari Opera
@media 21.0 9.0 3.5 4.0 4.0
  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS媒体查询
上一篇: CSS分页
CSS媒体查询
下一篇: CSS视频