移动端浏览器横屏、竖屏样式

最新推荐文章于 2022-08-16 16:12:45 发布

樊小书生

最新推荐文章于 2022-08-16 16:12:45 发布

阅读量2.9k

点赞数 1

分类专栏： CSS 文章标签： css 移动

本文链接：https://blog.csdn.net/fxss5201/article/details/80037887

版权

CSS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

在做移动端的时候，我们会遇到横竖屏样式该如何使用，我们可以定义两个最顶层的父类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>