@media screen and (orientation: portrait) {

    html{

        width : 100vmin;

        height : 100vmax;

    }

    body{

        width : 100vmin;

        height : 100vmax;

    }

    #gyroContain{

        width : 100vmax;

        height : 100vmin;

        transform-origin: top left;

        transform: rotate(90deg) translate(0,-100vmin);

    }

  }

@media screen and (orientation: landscape) {

    html{

        width : 100vmax;

        height : 100vmin;

    }

    body{

        width : 100vmax;

        height : 100vmin;

    }

    #gyroContain{

        width : 100vmax;

        height : 100vmin;

    }

}
<html>

    <body>

        <div id="gyroContain">

            非常多非常多的文字

        </div>

    </body>

</html>

如果你的页面里有from表单要填的话，应该用 「弹出遮罩层让用户旋转手机」 的解决方案。检测手机竖屏下，提示用关闭屏幕旋转锁定，并横置手机。想想手机浏览器还是竖屏，而内容却被强制横屏的画面有多奇怪吧...

1，vw、vh、vmin、vmax 的含义

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
 
（2）具体描述如下：
  • vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
  • vh：视窗高度的百分比
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值
 

2，vw、vh 与 % 百分比的区别

（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
 

3，vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
 

4，浏览器兼容性

（1）桌面 PC
  • Chrome：自 26 版起就完美支持（2013年2月）
  • Firefox：自 19 版起就完美支持（2013年1月）
  • Safari：自 6.1 版起就完美支持（2013年10月）
  • Opera：自 15 版起就完美支持（2013年7月）
  • IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
 
（2）移动设备
  • Android：自 4.4 版起就完美支持（2013年12月）
  • iOS：自 iOS8 版起就完美支持（2014年9月）

css3 横屏的更多相关文章

  1. CSS3判断手机横屏竖屏

    原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...

  2. css3 移动端页面全屏旋转，横屏显示。

    css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...

  3. 【CSS3】横屏引导小动画

    演示地址:http://codepen.io/anon/pen/oXbXdX 主要知识点: @media all and (orientation : landscape) { /* 这是匹配横屏的状 ...

  4. 用css3解决移动端页面自适应横屏竖屏的思考

    之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时 ...

  5. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. CSS3 media 入门

    css3 media  严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media  语法: @media mediatype a ...

  7. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

随机推荐

  1. Vue 实现微信提示浏览器转跳功能

    <template> <div class="main"> <div :class="show==true ? 'block':'block ...

  2. 某次无中生有的getshell过程

    0x01 写在前面 某次对目标的渗透中,发现了疑似前台上传漏洞,反复测试后无法成功利用,多方探寻最终成功getshell的过程. 0x02 信息收集 这次的目标是一个APP分发平台,对这一类的网站接触 ...

  3. leaflet 的 marker 弹框 iframe 嵌套代码

    A页面 嵌套 B页面的代码 主要处理  leaflet 的 marker 的 popopen,     marker的点击的显示/隐藏 pop   会导致pop中的页面的内容,消失,不在页面中,导致b ...

  4. 【springcloud alibaba】配置中心之nacos

    接着上一篇的[springcloud alibaba]注册中心之nacos,这一篇主要讲nacos的配置中心能力.nacos的集群部署及持久化请看上一篇. ---------------------- ...

  5. Linux 替换^M字符

    Linux 替换^M字符 在Linux下使用vim 来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些"^M". 1.使用dos2unix命令.一般的分发版本中都带 ...

  6. Javascript - Vue - webpack中的axios

    导入axios import Vue from "vue";import axios from "axios";import { get } from &quo ...

  7. Mac Ideal 常用快捷键

    智能提示 ⌘ -> command ⇧ -> shift ⌥ -> option -> 上箭头 -> 下箭头 ⌃ -> Control mac的option键  = ...

  8. k8s 探针 exec多个判断条件条件 多个检测条件

    背景 1,之前我们的yaml文件里面有就绪探针. 2,探针是检测一个文件是否生成,生成了说明服务正常. 3,现在要加一个检测,也是一个文件是否存在并且不为空. 4,只有两个条件同时满足了 服务才算正常 ...

  9. mysql各个版本驱动jar包下载 mysql/mysql-connector-java/5.1.22

    想下个jar csdn上全是要积分下载,这里记录下 下载地址,免得到时又要找 http://central.maven.org/maven2/mysql/mysql-connector-java/

  10. Leetcode 146. LRU 缓存机制

    前言 缓存是一种提高数据读取性能的技术,在计算机中cpu和主内存之间读取数据存在差异,CPU和主内存之间有CPU缓存,而且在内存和硬盘有内存缓存.当主存容量远大于CPU缓存,或磁盘容量远大于主存时,哪 ...