//今天无意间浏览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. pycharm 语言配置

    在pycharm 安装所在位置找到 lib 文件夹 打开后找到 rescources_**.jar 文件 **为语言类型,英语为en 中文为cn, 用相应语言文件替换,便可变成相应语言 https:/ ...

  2. Linux菜鸟起飞之路【一】基本知识与Linux的安装

    一.操作系统基本常识 1.操作系统的定义:操作系统是用来协调.管理和控制计算机硬件与软件资源的系统程序,介于硬件与应用程序之间. 2.操作系统内核的定义:操作系统内核是一个管理和控制程序,负责管理计算 ...

  3. php微信红包算法

    微信红包算法.php /**生成红包的函数*/ function getRandMoney($totalMoney, $totalPeople=2, $miniMoney=1){ $randRemai ...

  4. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  5. JS大小转化B KB MB GB的转化方法

    function conver(limit){ var size = ""; ){ //如果小于0.1KB转化成B size = limit.toFixed() + "B ...

  6. 想成长为一名年薪50万+的实战型架构师？必掌握这7大实战技能经验--阿里mike

    想成为一名架构师,但是架构师对应的技能,我应该掌握哪些啊?以及掌握的程度是什么样的?如何成为一名真正的实战性架构师? 我简要分为以下7点来谈谈,从技能的角度抛砖引玉,希望你对你架构师之路有一定的参考. ...

  7. Session只读的影响

    .net中使用Session必须实现IRequiresSessionState接口,不过还有个只读的接口IReadOnlySessionState, 若是实现只读的接口,那么在该页面(如一般处理程序) ...

  8. DiyCode开源项目 BaseActivity 分析

    1.首先将这个项目的BaseActivity源码拷贝过来. /* * Copyright 2017 GcsSloop * * Licensed under the Apache License, Ve ...

  9. Mysql密码加密方式

    以Mysql 4.1版本为分界线,两种加密方式 Mysql323加密:(16位) select  old_password('root'); //Mysql自带加密函数old_password(str ...

  10. Careercup - Microsoft面试题 - 6751316000899072

    2014-05-12 07:10 题目链接 原题: Write a thread safe data structure such that there could be only one write ...