媒体查询

题目1: 用媒体查询实现如下要求

1. 在页面宽度> 1200px 时页面背景为红色 
2. 在页面1200px>=宽度> 900px  时页面背景为绿色
3. 在页面900px>=宽度> 600px  时页面背景为黄色
4. 宽度<=600px 背景为灰色
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 大家好,我是IT修真院郑州分院第四期的学员汪开放,一枚正直纯洁善良的web程序员 今天给大家分享一下,媒体查询如何...
    小白的前端修真梦阅读 10,706评论 0 2
  • 题目1: 用媒体查询实现如下要求 在页面宽度> 1200px 时页面背景为红色 在页面1200px>=宽度> 90...
    Komolei阅读 4,017评论 0 0
  • CSS3 媒体查询与响应式布局 第一章 序论 现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规...
    whitsats阅读 10,319评论 0 10
  • CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。通过查询视口宽度,我们...
    味蕾里的青春阅读 12,702评论 2 13
  • 我是地球上最后一滴水 孤苦伶仃 无依无靠 身心俱疲中 我做了一个蓝色的梦 曾经 那个蓝色的水球多美 清澈见底的湖...
    缘末阅读 3,704评论 28 51

友情链接更多精彩内容