媒体查询

最新推荐文章于 2022-08-01 12:49:41 发布

原创最新推荐文章于 2022-08-01 12:49:41 发布 · 450 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#CSS

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了HTML5文档结构的重要性，强调了为html根元素指定lang属性和明确字符编码的必要性。同时，详细解释了CSS媒体查询在响应式布局中的应用，包括如何根据不同屏幕尺寸调整网页元素的显示。

<!DOCTYPE html>
<html lang="zh-CN"><!-- 语言属性
根据 HTML5 规范：强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。-->
  <head>
  	<meta charset="UTF-8"><!--字符编码
通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。-->
  	<meta http-equiv="X-UA-Compatible" content="IE=Edge"><!-- IE 兼容模式: IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。-->
  	<!--<link rel="stylesheet" href="xxx.css">--><!--根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。-->
  	<style>
    /* css  */
    @media (min-width: 450px) {
        #red {
          display: block;
        }
        #blue {
          display: none;
        }
    }
    @media (min-width: 450px) {
        #red {
          width:200px !important;
        }
        #blue {
          display: none;
        }
    }

    @media (min-width: 900px) {
        #red {
          display: none;
        }
        #blue {
          display: block;
        }
    }
    </style>
  </head>
  <body>
  	<div id="red" style="background-color:red;width:100px;height:100px;"></div>
    <div id="blue" style="background-color:blue;width:100px;height:100px;"></div>
  </body>
  <!-- JavaScript --> 
  <!--<script src="xxx.js"></script>-->
</html>