在做移动端的时候,我们会遇到横竖屏样式该如何使用,我们可以定义两个最顶层的父类class,然后根据css的后代选择器来定义相应的样式,但我们今天要说的是利用媒体查询来做。
关于媒体查询的具体文档可查看https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media ,这里就不做过多描述,咱们这次主要说的媒体特性是orientation
。
orientation
orientation特性可用于基于视口的方向应用样式。我们恰恰使用此特性来实现。
使用方法
基本用法上如下:
@media screen and (orientation: landscape) {
/* 横屏 */
}
@media screen and (orientation: portrait) {
/* 竖屏 */
}
可以直接点击此处查看例子,下面贴出例子代码:
<!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>