@media使用方法

@media 是 CSS3 中的一个重要特性,它允许我们根据设备的特性(如设备的宽度、高度、方向、分辨率等)来应用不同的样式规则。下面是 @media 的使用方法,按照清晰的结构进行分点表示和归纳:

1. 基本语法

@media 的基本语法如下:

@media mediaType and (mediaFeature) {  
    /* CSS 样式规则 */  
}

4. 示例

  • mediaType:媒体类型,常见的媒体类型包括 all(所有设备)、screen(屏幕设备,如电脑、手机、平板等)、print(打印机)等。如果不指定媒体类型,则默认为 all
  • mediaFeature:媒体特性,用于根据设备的属性来选择样式规则。常见的媒体特性包括 widthheightmin-widthmax-widthdevice-widthorientation 等。
  1. 2. 使用方式

    2.1 外链式

    在 HTML 文件的  标签中使用  标签引入外部 CSS 文件,并在 media 属性中指定媒体查询条件。

      
          
    

    这里表示当视窗宽度大于等于 1200px 时,test.css 中的样式会生效。

    2.2 内部方式

    在 HTML 文件的 

    这里表示当视窗宽度小于等于 1200px 时,.test 类的元素的宽度会被设置为 800px。

  2. 以下是一个简单的媒体查询示例,它根据视口宽度(viewport width)来应用不同的背景颜色

    @media (max-width: 768px) {  
      /* 在视口宽度小于等于 768px 时应用的样式 */  
      body {  
        background-color: lightblue;  
      }  
    }  
      
    @media (min-width: 769px) and (max-width: 1024px) {  
      /* 在视口宽度在 769px 到 1024px 之间时应用的样式 */  
      body {  
        background-color: lightgreen;  
      }  
    }  
      
    @media (min-width: 1025px) {  
      /* 在视口宽度大于等于 1025px 时应用的样式 */  
      body {  
        background-color: lightyellow;  
      }  
    }

  • 3. 注意事项

  • 在指定设备特性时,需要使用合适的单位和值。
  • 媒体查询的顺序很重要,应该先写大的设备特性,再写小的设备特性。
  • 当视窗宽度小于 300px 时,修改背景颜色为浅蓝色:

    • notonly 和 and 等关键字可以用于联合构造复杂的媒体查询。
    • 使用逗号 , 可以将多个媒体查询合并为一个规则,当列表中的任何查询为 true 时,整个 media 语句均返回 true
      @media screen and (max-width: 300px) {  
          body {  
              background-color: lightblue;  
          }  
      }
    • 当设备方向为横向时,应用特定的样式:

      @media screen and (orientation: landscape) {  
          /* 横向时的样式 */  
      }
    • 通过 @media 规则,我们可以实现响应式设计,使网页能够在不同设备和屏幕尺寸下都有良好的显示效果。

你可能感兴趣的:(CSS,HTML,css,html,前端)