//今天无意间浏览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. ZendFramework-2.4 源代码 - 关于MVC - Model层

    所谓的谓词Predicate // ------ 所谓的谓词 ------ // 条件 case.3 $where = new \Zend\Db\Sql\Where(); $expression = ...

  2. JZOJ 5842

    Description 给定一个n*m 的 01 矩阵,求包含[l,r]个 1 的子矩形个数. Input 第一行,两个正整数n,m.接下来n 行,每行一个长度为 m 的 01 串,表示给定的矩阵.接 ...

  3. JZOJ 1266. 玉米田

    1266. 玉米田(cowfood.pas/c/cpp) (File IO): input:cowfood.in output:cowfood.out Time Limits: 1000 ms  Me ...

  4. 精通SpringBoot--Spring事件 Application Event

    Spring的事件为Bean与Bean之间的通信提供了支持,当我们系统中某个Spring管理的Bean处理完某件事后,希望让其他Bean收到通知并作出相应的处理,这时可以让其他Bean监听当前这个Be ...

  5. Scrapy的架构与原理的理解【转】

    Scrapy 框架 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页 ...

  6. 10 RESTful 实现权限控制

    1 2 身份控制 3 4 只能显示5条数据 5 权限控制 序列化渲染深度 6

  7. Go语言之反射（三）

    结构体转JSON JSON格式是一种用途广泛的对象文本格式.在Go语言中,结构体可以通过系统提供的json.Marshal()函数进行序列化.为了演示怎么样通过反射获取结构体成员以及各种值的过程,下面 ...

  8. IOS开发---菜鸟学习之路--（三）-数据解析

    第三篇 上一篇我们讲了如何通过NSURL类来获取数据, 这一章我们来讲下对于获取过来的数据如何解析. 好了直接进入正文吧. 正文: 上一篇讲了 我们获取过来的数据格式是JSON格式的 大家可以搜下对应 ...

  9. XMind8 Pro激活

    最近使用XMind8 还不错,奈何更多功能是需要升级8Pro才能使用,现已经激活成功,记录下过程: 1.下载XMind8 Update4并且安装,此安装过程简单[安装包太大,无法上传,正在想办法] 2 ...

  10. Python-S9-Day87——admin的使用

    01 admin的使用1 02 admin的使用2 03 admin的使用3 04 url方法的使用 05 单例模式 06 admin源码之注册功能 07 admin源码之url设计 08 admin ...