@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匹配屏幕横竖状态的更多相关文章

  1. Android屏幕横竖屏切换和生命周期管理的详细总结

    一般的我们去切换屏幕方向都是不希望Activity被重新创建,这时就需要对一些属性进行设置,或者使用代码设置.        今天想学一下Android屏幕横竖屏切换,但是网上很多知识不准确或不正确, ...

  2. 迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法

    迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法 详情了解:http://topeetboard.com 更多了解:https://arm-board.taobao.com/ 用户在开发板上运 ...

  3. 解决Android手机 屏幕横竖屏切换

    Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在An ...

  4. android:configChanges 屏幕横竖屏切换

    出处:http://blog.csdn.net/djy1992/article/details/9378195 --->  android:screenOrientation="por ...

  5. Android判断屏幕开关状态

    方法一:使用系统服务 PowerManager pm= (PowerManager) mContext.getSystemService(Context.POWER_SERVICE); if(!pm. ...

  6. 监听iOS检测屏幕旋转状态，不需开启屏幕旋转－b

    -(void)rotation_icon:(float)n { UIButton *history_btn= [self.view viewWithTag:<#(NSInteger)#>] ...

  7. Android(三) 匹配屏幕密度

    过去,程序员通常以像素为单位设计计算机用户界面.例如:图片大小为80×32像素.这样处理的问题在于,如果在一个dpi(每英寸点数) 高的显示器上运行该程序,则用户界面会显得很小.在有些情况下,用户界面 ...

  8. 关于HTML，css3自适应屏幕，自适应宽度

    设置了在不同分辨率下,显示的css样式: @media screen and (min-width:1080px){ .box{ width: 1080px;}.content{width: 1040 ...

  9. JS -判断、监听屏幕横竖屏切换事件

    通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...

随机推荐

  1. ASP.NET MVC3快速入门——第五节、从控制器访问模型中的数据

    5.1 从控制器访问模型中的数据在本节中,我们将创建一个新的MoviesController类,并且书写代码来获取数据库中的数据,并通过视图模板来显示在浏览器中.鼠标右击Controller文件夹,点 ...

  2. SQL查询最近三个月的数据（查询最近几天，几年等等）

    定义和用法      :: 天,这样就可以找到付款日期. 我们使用如下 ,OrderDate) AS OrderPayDate FROM Orders 结果: OrderId    OrderPayD ...

  3. MySQL数据备份之mysqldump

      mysqldump常用于MySQL数据库逻辑备份 1.各种用法说明 A. 最简单的用法: mysqldump -uroot -pPassword [database name] > [dum ...

  4. 异步套接字基础：select函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET

    参考:[原创]技术系列之 网络模型(三)多路复用模型 select函数 select函数: 系统提供select函数来实现多路复用输入/输出模型.原型: #include <sys/time.h ...

  5. Angular Textarea 高度自动变化

    很多前端开发的朋友可能都会遇到textarea 输入框的高度不能自动随着用户的输入变化的问题,今儿小生也遇到了, 并通过网络上的信息解决了这个问题,于是将解决方法贴上,以作备忘. directiveA ...

  6. NET基础课--Linq第一讲

    在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前,在声明一个变量的时候, 总是要为一个变量指定他的类型甚至在foreach一 ...

  7. CSS兼容性常见问题总结

    DIV+CSS设计IE6.IE7.FF 兼容性 DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使 ...

  8. 利用MetaWeblog API 自制博客发布小工具

    博客园提供了诸多数据接口, 利用这些接口可以很容易的实现博客的发布,修改,删除等 1.需要引用一个DLL:为CookComputing.XmlRpcV2 2.新建一个类,在其中是一些要实现的东西,如: ...

  9. C# 实现预览dwg文件完整源代码(无需autocad环境)

    using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...

  10. Android 多线程断点下载（非原创）

    1.服务器的CPU分配给每条线程的时间片相同,服务器带宽平均分配给每条线程,所以客户端开启的线程越多,就能抢占到更多的服务器资源,这里在客户端开启多个线程来从服务器下载资源 2.fragment_ma ...