 |
位置：电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：CSS3教程 > 实例1 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： CSS3 多媒体查询 | 下一篇： 实例2 |
|
以下实例中在屏幕可视窗口尺寸大于 600 像素的设备上修改背景颜色: 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 多媒体查询</title>
<style>
/*默认背景颜色：粉色（屏幕小于600px时候显示）*/
body {
background-color: pink;
}
/*屏幕大于于600px时候显示lightgreen）*/
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 600 px ，背景颜色显示pink。</p>
</body>
</html>效果图以下实例中在屏幕可视窗口尺寸大于 600 像素的设备上修改背景颜色: 代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 多媒体查询</title>
<style>
/*默认背景颜色：粉色（屏幕小于600px时候显示）*/
body {
background-color: pink;
}
/*屏幕大于于600px时候显示lightgreen）*/
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 600 px ，背景颜色显示pink。</p>
</body>
</html>效果图
|
|
| 上一篇： CSS3 多媒体查询 | 下一篇： 实例2 |
