//今天无意间浏览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. gitLab 服务器搭建 (自己服务器上搭建gitLab)

    环境 lunix(ubuntu) 1:添加文件 在   /etc/apt/sources.list.d/gitlab-ce.list 中添加一行 deb https://mirrors.tuna.ts ...

  2. selinux详解及配置文件

    selinux详解 selinux 的全称是Security Enhance Linux,就是安全加强的Linux.在Selinux之前root账号能够任意的访问所有文档和服务 : 如果某个文件设为7 ...

  3. java util - MD5/AES/RSA快速调用工具

    测试代码 package cn.java.security; import java.security.Key; import java.util.Base64; import org.junit.A ...

  4. CyclicBarrier源码分析

    CyclicBarrier是通过ReentrantLock(独占锁)和Condition来实现的.下面,我们分析CyclicBarrier中3个核心函数: 构造函数, await()作出分析. 1. ...

  5. day 17 jQuery

    什么是jQuery? 可以把它认为是python中的模块,导入就可以使用模块中的功能. jQuery 的版本: 1.xx 系列 2.xx 系列 3.xx 系列 最常用的为1 系列,1系列最新版为1.1 ...

  6. cf976f Minimal k-covering

    枚举 \(k\),对于每个点 \(i\) 我们最多删 \(deg_i-k\) 条边,就源点向第一部.第二部向汇点连边,容量是 \(deg_i-k\),原边连上,容量是 \(1\),这样每流过一条原边在 ...

  7. linux环境搭建系列之Apache ant安装步骤

    前提: linux centOS6.6 64位操作系统 ROOT账号 JDK1.7 注意:JDK和Ant版本一定要是对应的,因为我的JDK是1.7版本的,所以我在官网下载的ant是1.9的 1.把安装 ...

  8. Mac OS使用brew安装memcached

    1.查看安装信息 brew info memcached 显示如下: memcached: stable 1.5.9 (bottled) High performance, distributed m ...

  9. [oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）

    1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...

  10. [oldboy-django][1初始django]模态对话框 + 动态加载gif (多对多数据库表)

    ajax+对话框(多对多) - 遮罩层,动态加载gif层,对话框层, a.一点击添加,绑定事件: - 出现遮罩层和动态gif层 - ajax向后台发送请求获取所有班级数据 - success,隐藏动态 ...