媒体类型

2017-07-05 11:16:00
admin
原创
276
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>@media</title>
<style>
.test,
.test2 {
	display: none;
}
/* 本条为CSS2部分,IE8及以下只支持本条 */
@media screen {
	body{ color: #f00; }
}
/* 下列为CSS3部分 */
@media screen and (min-width: 960px) {
	body{ background: #999; }
}
@media screen and (device-width: 1024px) {
	.test { display: block; }
}
@media screen and (width: 1024px) {
	.test2 { display: block; }
}
</style>
</head>
<body>
<div>Media Queries媒体查询</div>
<div class="test">如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果(取决于输出设备屏幕分辨率的大小,不随包括浏览器在内的窗体大小而改变)</div>
<div class="test2">如果视口宽度为1024px的话将能看到本条规则的效果(随包括浏览器在内的窗体大小而改变)</div>
</body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227