手机横屏时候提示请竖屏浏览纯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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM