文章目录
  1. 1. orientation
  2. 2. 使用方法

在做移动端的时候,我们会遇到横竖屏样式该如何使用,我们可以定义两个最顶层的父类class,然后根据css的后代选择器来定义相应的样式,但我们今天要说的是利用媒体查询来做。

关于媒体查询的具体文档可查看https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media ,这里就不做过多描述,咱们这次主要说的媒体特性是orientation

orientation

orientation特性可用于基于视口的方向应用样式。我们恰恰使用此特性来实现。

使用方法

基本用法上如下:

1
2
3
4
5
6
7
@media screen and (orientation: landscape) {
/* 横屏 */
}

@media screen and (orientation: portrait) {
/* 竖屏 */
}

可以直接点击此处查看例子,下面贴出例子代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>orientation</title>
<style>
@media screen and (orientation: portrait) {
/*竖屏*/
body {
color: green;
}
}
@media screen and (orientation: landscape) {
/*横屏*/
body {
color: red;
}
}
</style>
</head>
<body>
<h2>查看手机横竖屏:</h2>
<ol>
<li>竖屏时字体颜色为绿色</li>
<li>横屏时字体颜色为红色</li>
</ol>
</body>
</html>
文章目录
  1. 1. orientation
  2. 2. 使用方法