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 ...
随机推荐
- maven的setting配置远程仓库
maven的setting,配置远程库. <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mi ...
- 【笔记】求数据的对应主成分PCA（第一主成分）
求数据的第一主成分 (在notebook中) 将包加载好,再创建出一个虚拟的测试用例,生成的X有两个特征,特征一为0到100之间随机分布,共一百个样本,对于特征二,其和特征一有一个基本的线性关系(为什 ...
- docker搭建clickhouse集群
//需要先搭建zookeeper集群.机器1: sudo docker run -d \ --name clickhouse --ulimit nofile=262144:262144 \ -p 81 ...
- ECDSA—模乘模块
如果a,b属于GF(P),则有乘法运算a*b=r (mod p), 其中r满足0<r<p-1,即a*b除以p的余数.该操作成为模p乘法.本模块输入两个数,完成两个数的模乘运算. 信号名 方 ...
- noip22
T1 考试的时候打的特殊性质分,然而暴力竟然写假了. 正解: 显然是个贪心,要最大化 \(a_{\min}\times b_{\min}\),肯定是要删掉若干个 \(a\) 最小,\(b\) 最小的矩 ...
- git flow版本
feature 分支:开发者进行功能开发的分支. develop 分支:对开发的功能进行集成的分支. release 分支:负责版本发布的分支. hotfix 分支:对线上缺陷进行修复工作的分支,热修 ...
- 针对Hbuilderx内置终端无法输入问题，总结了三种方法供大家参考
下图,是内置终端无法输入的现象(本人使用的第三种方案,解决了该问题) 第一种解决方案,也是网上推荐最多的方案: 打开Hbuilder安装路径下插件文件夹中的main.js文件:HBuilderX\pl ...
- MySQL 数据库、数据表、数据的基本操作
1.数据库(database)管理 1.1 create 创建数据库 create database firstDB; 1.2 show 查看所有数据库 mysql> show database ...
- ASP.NET Core：ASP.NET Core程序使用Docker部署
一.前言 这篇文章介绍如何将一个ASP.NET Core应用程序在Docker中进行部署.开发工具使用的是Visual Studio 2019和VS Code. 二.使用Docker部署 我们选择新建 ...
- 【iKBC poker2】使用说明书（简体中文版）自用
主要功能介绍: 可携带式 60%键盘 搭配 QWERTY 配置(61 Key) Cherry MX 系列轴 (黑.青.茶.红) 双层板 PCB 键帽材质: ABS(喷漆镀膜-LED 专用).PBT L ...