By

文章目录
  1. 1. 媒体查询语法
  2. 2. 媒体查询特性

媒体查询语法

纵向媒体查询

1
<link rel="stylesheet" meida="screen and (orientation:portrait)" href="portrait-screen.css" />

在媒体查询的开头追加not则会颠倒查询的逻辑

1
<link rel="stylesheet" meida="not screen and (orientation:portrait)" href="portrait-screen.css" />

限制视口宽度

1
<link rel="stylesheet" meida="not screen and (orientation:portrait) and (min-width:800px)" href="portrait-screen.css" />

CSS样式表中使用媒体查询

1
2
3
@media screen and (max-device-width: 400px) {
    h1 { color: green}
}

使用CSS的@import指令在当前样式表中按条件引入其他样式表

1
@import url("phone.css") screen and (max-width:360px);

使用CSS的@import方式会增加HTTP请求(这会影响加载速度)，要谨慎使用。

媒体查询特性

视口宽度: width
屏幕宽度: device-width
文章目录
  1. 1. 媒体查询语法
  2. 2. 媒体查询特性