Bootstrap -- css的media属性

最新推荐文章于 2024-06-07 19:37:27 发布

gocpplua

最新推荐文章于 2024-06-07 19:37:27 发布

阅读量1.2w

点赞数 1

分类专栏： PHP从入门到精通文章标签： Bootstrap css media media属性独立开发者er html media

本文链接：https://blog.csdn.net/chenqiai0/article/details/42931381

版权

PHP从入门到精通专栏收录该内容

15 篇文章 0 订阅

订阅专栏

下面一段代码是实现：设备最大宽度为767px，当设备宽度大于767px背景色就是#000，否则就是#f00，代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
body{background:#000;}
@media (max-width:767px){body{background:#f00;}}  <!-- 设备最大宽度为767px，当设备宽度大于767px就是#000，否则就是#f00 -->
</style>
</head>
<body>
</body>
</html>

下面我们稍微扩展下media：

CSS Media属性

　　screen：指计算机屏幕。
　　print：指用于打印机的不透明介质。
　　projection：指用于显示的项目。
　　braille：盲文系统，指有触觉效果的印刷品。
　　aural：指语音电子合成器。
　　tv：指电视类型的媒体。
　　 handheld：指手持式显示设备(小屏幕，单色)
　　all：适合于所有媒体。