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

//今天无意间浏览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>
原文地址:https://www.cnblogs.com/junwu/p/7700799.html