@media布局

最新推荐文章于 2024-06-01 09:39:57 发布

「已注销」

最新推荐文章于 2024-06-01 09:39:57 发布

阅读量280

点赞数

分类专栏： HTML+CSS标准布局文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_43878590/article/details/112214073

版权

HTML+CSS标准布局专栏收录该内容

5 篇文章

订阅专栏

本文介绍了@media的两种引用方式：内部样式直接引用和通过link标签有条件地引入外部样式表。同时，重点讲解了@media的常用参数，包括width、height、device-width、device-height以及min/max-width和min/max-height等，这些参数用于根据设备屏幕尺寸实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@media引用和使用

- @media引用方式
- @media常用参数

@media引用方式

内部样式直接引用

 <style>
      /* 放入公共样式 */
      .box{
          width: 100px;
          height: 100px;
          background-color: red;
      }
      /* 放入media设置的宽高样式 */
      @media screen and (min-width:0px) and (max-width: 799px) {
          .box{
              background-color: green;
          } 
      }
      @media screen and (min-width: 800px) and (max-width: 1000px) {
          .box{
              background-color: blue;
          }
      }
  </style>

写在style标签上，有条件的执行内部样式表

<style media="(min-width: 100px) and (max-width: 500px)">
   .box {
        width: 100%;
        height: 100px;
        background-color: red;
    }
</style>

写在link标签上，有条件的引入外部样式表

<link rel="stylesheet" href="css/test.css" media="(min-width: 100px) and (max-width: 500px)">

@media常用参数

width / height：浏览器可视宽 / 高
device-width / device-height：设备屏幕的宽度 / 高度（移动端）
min-width / max-width / min-height / max-height: 设备屏幕的宽度 / 高度（pc端）

media媒体特性

如需转载，请标注