css3 横屏
@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 的含义
- vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
- vh：视窗高度的百分比
- vmin：当前 vw 和 vh 中较小的一个值
- vmax：当前 vw 和 vh 中较大的一个值
2，vw、vh 与 % 百分比的区别
3，vmin、vmax 用处
4，浏览器兼容性
- Chrome：自 26 版起就完美支持（2013年2月）
- Firefox：自 19 版起就完美支持（2013年1月）
- Safari：自 6.1 版起就完美支持（2013年10月）
- Opera：自 15 版起就完美支持（2013年7月）
- IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）
- Android：自 4.4 版起就完美支持（2013年12月）
- iOS：自 iOS8 版起就完美支持（2014年9月）
css3 横屏的更多相关文章
- CSS3判断手机横屏竖屏
原理: 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏, ...
- css3 移动端页面全屏旋转，横屏显示。
css3旋转模拟手机横屏. 当手机不能自动旋转时,或有特殊需求.用css3 transform,实现横屏展示. 注意: 相关样式注意横屏的显示. touch的手势方向没有变,依旧是原来方向,若有相关插 ...
- 【CSS3】横屏引导小动画
演示地址:http://codepen.io/anon/pen/oXbXdX 主要知识点: @media all and (orientation : landscape) { /* 这是匹配横屏的状 ...
- 用css3解决移动端页面自适应横屏竖屏的思考
之前对于横屏的webapp做过一些尝试,可是始终不是非常好的解决方式,前段时间又接触了类似的需求,尝试了感觉更好的解决方式. 之前的方法写的博客:移动网页横竖屏兼容适应的一些体会 这里举的样例还是平时 ...
- CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是) 写不同的css样式.而流式布局 则才算是响应式布局. css3 media 语法: @media mediatype a ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
随机推荐
- TreeUtil.java
package com.infish.util; import java.lang.reflect.Method; import java.util.ArrayList; import java.ut ...
- 011 FPGA千兆网TCP通信【转载】
一.LWIP 首先通过上面的简单分析,我们应该很清楚一件事:TCP协议很复杂,光握手过程就需要"三次握手.四次挥手"的复杂过程,不是特别适合FPGA的纯逻辑实现,因为用FPGA实现 ...
- ARM—异常中断处理
文章目录 一. ARM程序执行流程 二. ARM工作模式 三. ARM中异常中断的种类 四. 异常中断向量表及优先级 五. 异常中断用到的寄存器 六. ARM进入处理异常中断时的操作 七. ARM退出 ...
- 六种方式，教你在SpringBoot初始化时搞点事情！
前言 在实际工作中总是需要在项目启动时做一些初始化的操作,比如初始化线程池.提前加载好加密证书....... 那么经典问题来了,这也是面试官经常会问到的一个问题:有哪些手段在Spring Boot 项 ...
- JVM快速扫盲篇
JVM虚拟机基础 JVM虚拟机结构 vm的整体结构大致如下: 类加载器:类加载器用来加载Java类到JVM虚拟机中,源代码程序.java文件在经过编译器编译之后就被转换成字节代码.class文件,类加 ...
- 心态崩了，我怎么知道实际生产环境的 B+ 树索引有多少层？
Q:在实际生产环境中,InnoDB 中一棵 B+ 树索引一般有多少层?可以存放多少行数据? 关于这个问题最近好像在牛客上经常看到,感觉没啥意义,可能主要考察的是对 B+ 索引的理解吧.先上答案: A: ...
- js 遍历数组对象求和
这个通常是求多个商品的总价遇到的情形: [ 0: {id: 1, name: "服务费", price: "1.00"} 1: {id: 2, name: &q ...
- mysql优化： 内存表和临时表
由于直接使用临时表来创建中间表,其速度不如人意,因而就有了把临时表建成内存表的想法.但内存表和临时表的区别且并不熟悉,需要查找资料了.一开始以为临时表是创建后存在,当连接断开时临时表就会被删除,即临时 ...
- TortoiseGit冲突和解决冲突
产生冲突原因 产生:多个开发者同时使用或者操作git中的同一个文件,最后在依次提交commit和推送push的时候,第一个操作的是可以正常提交的,而之后的开发者想要执行pull(拉)和pull(推)操 ...
- java实用资料
1.怎么构造一个线程安全的hashmap?用reentrantreadwritelock2.线程是怎么处理二个以上的对象同时处理一个全局变量 3.读文件为啥不用字符流 4.请求鉴定,各种错误码502- ...