//今天无意间浏览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. 二、Shell 变量

    Shell 变量 定义变量时,变量名不加美元符号($,PHP语言中变量需要),如: your_name="runoob.com" 注意,变量名和等号之间不能有空格,这可能和你熟悉的 ...

  2. Python_循环判断表达式

    一.if判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. if判断结构: if 条件: 动作 elif 条件: 动作 else: 动作 if判断年龄: age_of_princal ...

  3. PHP实现的敏感词过滤方法

    PHP实现的敏感词过滤方法,以下是一份过滤敏感词的编码.有需要可以参考参考. /** * @todo 敏感词过滤,返回结果 * @param array $list 定义敏感词一维数组 * @para ...

  4. pycharm配置Git托管

    利用Pycharm和github管理代码转载https://www.cnblogs.com/feixuelove1009/p/5955332.html git教程--廖雪峰git教程  转载https ...

  5. HDU4616 树形DP+三次深搜

    这题和之前那个HDU2616有着奇妙的异曲同工之处..都是要求某个点能够到达的最大权重的地方... 但是,这题加了个限制,要求最多只能够踩到C个陷阱,一单无路可走或者命用光了,就地开始清算总共得分之和 ...

  6. jmeter XML格式的结果中各属性的含义

    最近在搞jmeter,生成xml的测试报告,对报告字段进行解释,可能是自己不会找,网上资源不多,好不容易找到的,记录下来: 感谢博主:http://blog.163.com/zhang_jing/bl ...

  7. 【java】实体类中 Set<对象> 按照对象的某个字段对set排序

    Java利用hibernate进行一对多查询时,把另一张表作为一个属性存进这张表的字段中,返回的类型是set类型,要对返回的set类型进行排序 user表 package onlyfun.caterp ...

  8. day14 前端基础 HTML

    从今天开始,学习前端基础. 前端,就是HTML CSS JS 等 对于我们这种初学者,并不知道这些专业术语都是什么,给大家举一个形象的例子: HTML  就是一个人,赤裸裸的人 CSS    就是衣服 ...

  9. CMD命令简介

    cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一般Wind ...

  10. 将FragmentManger事务添加到返回栈中

    FragmentManger事务添加或替换的 Fragment 后,这时点击 Back 键,程序并不会返回添加之前的状态. 我们可以使用 Transaction 对象的 addToBackStack( ...