@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. Mybatis源码解析2—— 实例搭建

    大家好,我是可乐. 上篇文章给大家撸了一遍用 JDBC 直接操作数据库的实例,还只是简单写了一个查询的接口,其代码量就已经很大了,并且可乐还给大家分析了直接使用 JDBC 带来的一些问题,总之是一种反 ...

  2. Redis-03-集群

    集群介绍 Redis Cluster 是 redis 的分布式解决方案, 在3.0版本正式推出,当遇到单机.内存.并发.流量等瓶颈时,可以采用Cluster架构方案达到负载均衡目的 Redis Clu ...

  3. ASP.NET Core 修改开源协议为MIT，.NET全平台 MIT协议开源了

    2021年7月23日,.NET开发团队完成了所有的.NET平台的相关框架的MIT协议更改,我们可以通过 https://github.com/dotnet/aspnetcore/issues/1887 ...

  4. 题解 Equation

    传送门 考场上打了两个小时树剖,结果还是没搞出来 发现对于两个确定的点,它们一定可以列出一个方程来 其中系数的大小和正负只与这两点间距离的奇偶性有关 所以可以加一堆分情况讨论然后树剖 至于正解: 考虑 ...

  5. 一招解决微信小程序中的H5缓存问题

    一招解决微信小程序中的H5缓存问题1.问题描述开发过程中,为了更新代码方便,往往会在小程序中嵌入H5页面.但问题来了,小程序原生代码更新版本后,简单的从微信中删除或者代码强刷就可以解决缓存问题,但小程 ...

  6. Semaphore 的使用

    var workerSemphore = new Semaphore(0, 800000); var IsWorkThreadCreated = true; var workThread = new ...

  7. 利用maven构建一个spring mvc的helloworld实例

    刚开始学习maven和spring mvc,学的云里雾里的 这里提供一个hello world实例,记录自己的学习之路 首先看maven官网的介绍 Apache Maven is a software ...

  8. 【springboot】集成Druid 作为数据库连接池

    转自:https://blog.csdn.net/cp026la/article/details/86508139 1. 引言 用户的每一次请求几乎都会访问数据库,访问数据库需要向数据库获取链接,而数 ...

  9. SpringCloud之Config

    1.背景 在前的学习中,我们几乎解决了springCloud的所有常规应用,但是大家有没有想过这样一个问题: 是使用微服务后,有非常多的application.yml文件,每个模块都有一个,实际开发中 ...

  10. axios 请求数据跳转页面报'$router' of undefined问题

    代码: this.$axios.post("/auth", { 'username': this.username, 'password': this.password }).th ...