CSS3匹配屏幕横竖状态
@media是css3中新定义的，功能非常强大，下面简单讲解一下用css3的@media orientation匹配手机屏幕是横屏还是竖屏。
顾名思义PC是无法匹配横竖屏的，所以orientation只对移动设备起效。
1.头部声明
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
加到<head></head>
2. media 匹配屏幕是横屏还是竖屏
@media all and (orientation : landscape) {
/* 这是匹配横屏的状态，横屏时的css代码 */
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
/* 这是匹配竖屏的状态，竖屏时的css代码 */
body {
background-color: #00ff00;
}
}
3. 应用的地方
（1）手机WEB页面元素内容一般都是通过百分比定义的，以便能够在不同分辨率设备下都能正常显示，虽然这样，但是移动设备的屏幕分辨率宽度和高度相差还是很大，同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大，这样就会失去页面的美观性，这样，如果用orientation匹配屏幕的翻转状态，就可以写不同的css加以控制页面样式。
（2）对于有背景图的移动WEB页面，可以根据orientation匹配屏幕屏幕状态，设置不同的background。
（3）稍微有技术的一点：某些有绝对定位元素的WEB页面，将某元素定位到页面底部，当屏幕是竖屏状态时，可能因为页面总长度小于屏幕高度(但是大于屏幕宽度)，这时将绝对定位元素定位到底部是正确的，但是当屏幕翻转成为横屏时，此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度)，绝对定位元素会覆盖在页面内容之上，导致页面出现问题，这时可用orientation匹配屏幕状态，调整css代码。
关于匹配屏幕横竖屏状态还可通过JS判断，js中onorientationchange是window的一个事件，可以通过监听事件匹配屏幕横竖屏。
CSS3匹配屏幕横竖状态的更多相关文章
- Android屏幕横竖屏切换和生命周期管理的详细总结
一般的我们去切换屏幕方向都是不希望Activity被重新创建,这时就需要对一些属性进行设置,或者使用代码设置. 今天想学一下Android屏幕横竖屏切换,但是网上很多知识不准确或不正确, ...
- 迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法
迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法 详情了解:http://topeetboard.com 更多了解:https://arm-board.taobao.com/ 用户在开发板上运 ...
- 解决Android手机 屏幕横竖屏切换
Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在An ...
- android:configChanges 屏幕横竖屏切换
出处:http://blog.csdn.net/djy1992/article/details/9378195 ---> android:screenOrientation="por ...
- Android判断屏幕开关状态
方法一:使用系统服务 PowerManager pm= (PowerManager) mContext.getSystemService(Context.POWER_SERVICE); if(!pm. ...
- 监听iOS检测屏幕旋转状态，不需开启屏幕旋转－b
-(void)rotation_icon:(float)n { UIButton *history_btn= [self.view viewWithTag:<#(NSInteger)#>] ...
- Android(三) 匹配屏幕密度
过去,程序员通常以像素为单位设计计算机用户界面.例如:图片大小为80×32像素.这样处理的问题在于,如果在一个dpi(每英寸点数) 高的显示器上运行该程序,则用户界面会显得很小.在有些情况下,用户界面 ...
- 关于HTML，css3自适应屏幕，自适应宽度
设置了在不同分辨率下,显示的css样式: @media screen and (min-width:1080px){ .box{ width: 1080px;}.content{width: 1040 ...
- JS -判断、监听屏幕横竖屏切换事件
通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...
随机推荐
- VirtualBox修改虚拟盘路径
VirtualBox虚拟盘路径默认是存在C盘的,而当我们发现C盘不够用的时候,想转移就感觉有点麻烦了,现在给大家介绍一个简单又使用的方法. 第一步:到默认目录C:\Users\Administrato ...
- VCMI Mods list
http://heroescommunity.com/viewthread.php3?TID=40902 http://heroes3wog.net/ http://heroes3towns.com/ ...
- 屌炸天实战 MySQL 系列教程（二） 史上最屌、你不知道的数据库操作
此篇写MySQL中最基础,也是最重要的操作! 第一篇:屌炸天实战 MySQL 系列教程(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:屌炸天实战 MySQL 系列教程(二) 史上最屌.你不 ...
- 《Java程序员面试笔试宝典》之Java与C/C++有什么异同
Java与C++都是面向对象语言,都使用了面向对象思想(例如封装.继承.多态等),由于面向对象有许多非常好的特性(继承.组合等),使得二者都有很好的可重用性. 需要注意的是,二者并非完全一样,下面主要 ...
- XShell连接CentOS 7.2显示中文乱码问题的解决方法
背景 使用U盘往Windows主机.Linux主机传文件还是经常的事,但有时候文件名有中文, 传到Linux机器会有乱码,选择起来也很麻烦,最近刚好遇到,写下解决方法. 环境 Linux [root@ ...
- IOS 创建一张有颜色的UIImage
#import <UIKit/UIKit.h> @interface UIImage (ImageWithColor) + (UIImage *)imageWithColor:(UICol ...
- 玩程序 之 一 . 字符串处理工具（可通过C#脚本扩展）
平常喜欢写点小东西玩玩,既可以娱乐自己满足自己的虚荣心,又可以方便工作和学习,今天且拿出一个来,与大家一起分享! 1. 软件介绍 言归正传,先看看需求,有这样一串字符串 abc,def,ghi,jk ...
- Eclipse代理设置
这段时间公司实行代理上网,不仅通过浏览器上网须要不停的输入username和password,在本地调试程序时候Eclipse居然也弹出框让输入username和password. 如图: 解决的方法 ...
- 在Maven的配置文件中,自定义私有仓库地址和设置下载的jar包的保存位置
在Maven的settings.xml,可以设置Maven的私有仓库的地址,还可以设置所下载jar包在自己电脑的保存地址(默认不设置保存在个人文件夹的.m2文件夹下). 1.设置私有仓库地址: < ...
- EasyUI 两个日期比较
两个日期进行比较,后一个日期不能早于晚一个日期.需要自己去扩展validatebox的方法 1.对比2个密码是否相同 $.extend($.fn.validatebox.defaults.rules, ...