手机横屏时候提示请竖屏浏览纯css实现

最新推荐文章于 2021-08-02 18:06:43 发布

anjia9203

最新推荐文章于 2021-08-02 18:06:43 发布

阅读量289

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/junwu/p/7700799.html

版权

//今天无意间浏览nike公众号看到的 最近也正在做着就记录下来备忘
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
.nike-portrait-screen { text-align: center; }
@media screen and (max-aspect-ratio: 13 / 9) {
  .nike-portrait-screen {
    display: none; }

  .nike-landscape-screen {
    height: 100%;
    width: 100%;
    display: block; } }
@media screen and (min-aspect-ratio: 13 / 9) {
  .nike-portrait-screen {
    display: block; }

  body {
    height: 0 !important;
    background-color: transparent !important; }

  .nike-landscape-screen {
    display: none; } }
    </style>
</head>
<body>
    <div class="nike-portrait-screen">
        <img src="images/landscape-image-2.gif" alt="">
        <div class="content-img">
            <img src="images/landscape-text.gif" alt="">
        </div>
    </div>
    
</body>
</html>