您需要添加一个元标签来识别宽度和媒体查询,以便在宽度不同时执行操作。将百分比添加到CSS元素而不是像素也会非常有帮助。
HTML代码:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
添加元标记以允许页面识别设备的宽度。请参见Mozilla对此的看法。
在此示例中,将在<p>
标记和背景上查询四个不同设备宽度,并应用它们。
<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
</body>
CSS代码:
p {
font-family: arial,san-serif;
font-size: 13px;
font-color: black;
}
h1 {
font-size:30px;
}
@media screen and (min-width:761px) {
body {
background-color:white;
}
h1 {
color:red;
}
}
@media screen and (max-width:760px) {
body {
background-color: #333;
}
h1 {
color:red;
}
p {
color: white;
}
}
@media screen and (max-width:480px) {
body {
background-color: #807f83;
}
h1 {
color:white;
}
p {
color: white;
}
}
@media screen and (max-width:360px) {
body {
background-color: #0096d6;
}
h1 {
color:white;
font-size:25px;
}
p {
color: white;
}
}
使用
@media Screen
在你的 css 中调用一个屏幕查询。当设备宽度达到该查询范围时,可以使用
@Media all
适用于所有媒体设备(请参见进一步阅读),然后将应用到相关元素的 css。查看
当前示例。当你在 JSFiddle 窗口中拖动框,如果满足查询条件,它会改变背景和文字颜色。你可以将相同的逻辑应用于手机、平板电脑、电视和台式机。
标准设备的媒体查询 - CSS Tricks
此示例由 JSFiddle 上的匿名用户提供。它提供了一个清晰的示例,说明如何确保你的元素根据所涉及的设备进行样式设置。我不承认任何功劳。
进一步阅读
- 微软 - 媒体查询
- @Media规则 - W3C
- 响应式Web设计Wiki