//今天无意间浏览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="data:images/landscape-image-2.gif" alt="">

        <div class="content-img">

            <img src="data:images/landscape-text.gif" alt="">

        </div>

    </div>

</body>

</html>

手机横屏时候提示请竖屏浏览纯css实现的更多相关文章

  1. js-判断移动端用户是横屏放的还是竖屏放的

    在一些移动端页面中,页面的样式我们就支持竖屏播放,这时我们就需要判断是横屏还是竖屏了,不同的方向显示冉的样式. //判断手机横屏竖屏 var html = ""; window.a ...

  2. android 国际化 横屏（land） 竖屏（port）margin外边距和padding内边距

    android 国际化 横屏(land) 竖屏(port) 边距又分为内边距和外边距,即margin和padding.

  3. 判断横屏竖屏，然后CSS重新计算

    function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") ...

  4. WP8手机解锁时提示“请确保IPOVERUSBSVC服务正常运行”解决方法

    如果你各种重启服务 卸载手机 重装驱动都试过了还不行,请看看你是否安装了Hyper-v或Vitualbox虚拟机,很有可能是虚拟交换机造成的. 我在网络连接属性里看到这个 把它卸载后,解锁成功. 解锁 ...

  5. mui禁止横屏显示,仅支持竖屏显示

    mui.plusReady(function () { plus.screen.lockOrientation("portrait-primary"); });

  6. 手机横屏竖屏css

    @media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效. 1.头部声明 复制代码 代码如下: <meta name=" ...

  7. 关于Cocos2d-x手机上运行游戏的时候屏幕横屏改竖屏的解决方案

    cocos2d-x打包的时候默认是横屏,如果要改成竖屏,步骤如下: 1.打开项目 2.打开proj.android 3.编辑AndroidManifest.xml 4. 找到这一句android:sc ...

  8. Android——横屏和竖屏的切换，以及明文密码的显示

    查看API文档: android.content.pm.ActivityInfo    在手机的使用中,我们要根据不同的需求来改变屏幕的显示方向,一般在浏览信息时是竖屏,在玩游戏的时候就要切换到横屏. ...

  9. js如何设置网页横屏和竖屏切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. 用正则表达式简单加密（C#为例）

    ") { List<" }; ") { foreach (char i in key) { keys[counter] = i.ToString(); counte ...

  2. Shell脚本使用汇总整理——mysql数据库5.7.8以前备份脚本

    Shell脚本使用汇总整理——mysql数据库5.7.8以前备份脚本 Shell脚本使用的基本知识点汇总详情见连接: https://www.cnblogs.com/lsy-blogs/p/92234 ...

  3. 五 python并发编程之IO模型

    一 IO模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问 ...

  4. OpenFaceswap 入门教程（3）: 软件参数篇！

    OpenFaceswap 的使用可以说是非常简单,只要稍加点拨就可以学会,厉害一点的人根本不需要教程,直接自己点几下就知道了.看了前面安装篇和使用篇.我想大多数人应该会了. 当学会了使用之后,你可能对 ...

  5. linux命令学习-2

    1. 对于已经在前台执行的命令,可以重新放到后台执行,首先按ctrl+z暂停已经运行的进程,然后使用jobs查看进程编号n:2. bg命令将停止的作业放到后台运行 bg %n3. kill -9 XX ...

  6. 栈及其DFS：B - Parentheses Balance

    解题心得及总结: 总结: 1.递推:又1推出n,数列中的基本到通项,最终目标得出通项公式. 递归:又n先压缩栈到1,再从函数的出口找到1,又1到n,再从n计算到1: 2.判断是否可以由递推或递推得出, ...

  7. 爬山算法 | Java版HA_TSP

    嗯哼,今天记录下采用Java编写的爬山算法(Hill Algorithm)求解TSP问题. 爬山算法与其他智能算法类似,是一种用来求解多峰函数最值的算法,爬山算法的基本思想是新解不劣于当前解则转移,否 ...

  8. Android通过AIDL和反射调用系统拨打电话和挂断电话

    首先在项目中添加ITelephony.aidl文件,我的如下: /* * Copyright (C) 2007 The Android Open Source Project * * Licensed ...

  9. Nhibernate官方体系结构图部分中文翻译

    原文链接 :http://nhibernate.info/doc/nh/en/index.html#architecture 体系结构图 高度抽象NHibernate体系架构图 这幅图展示了NHibe ...

  10. day38--MySQL基础二

    1.数据库连表 1.1, 一对多 使用外键做约束.注意:外键列的数据类型要一致. 命令的方式创建外键CREATE table part1( nid int not null auto_incremen ...