1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS3匹配屏幕横竖状态

作者:用户 来源:互联网 时间:2016-08-03 13:35:29

横竖屏切换页面竖屏显示元素状态屏幕屏幕状态Xamarin 制竖屏宽度orientedorientationjs横竖屏检测js判断横屏竖屏判断横竖屏幕

CSS3匹配屏幕横竖状态 - 摘要: 本文讲的是CSS3匹配屏幕横竖状态, @media是css3中新定义的,功能非常强大,下面简单讲解一下用css3的@media orientation匹配手机屏幕是横屏还是竖屏。 顾名思义PC

@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的一个事件,可以通过监听事件匹配屏幕横竖屏。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索横竖屏切换 , 页面 , 竖屏显示 , 元素 , 状态 , 屏幕 , 屏幕状态 , Xamarin 制竖屏 , 宽度 , oriented , orientation , js横竖屏检测 , js判断横屏竖屏 判断横竖屏幕 excel 横竖匹配、unity判断横竖屏状态、ipad屏幕花屏横竖纹、电脑屏幕横竖切换、苹果手机屏幕横竖屏,以便于您获取更多的相关知识。

关于android 横竖屏的一个问题。求高手赐教。

... 解决方案 其实我很奇怪为什么你的屏幕没有转成横屏,因为你已经设置横屏了。 如果一个界面是横屏状态下锁屏,如果锁屏界面是竖屏,那解锁后会先竖屏再转成横屏,貌似和锁屏界面有点关系,不过还...

网页判断手机横屏或是竖屏的代码

...ert("横屏");     } }); CSS3判断手机横屏竖屏 当用户旋转屏幕的时候,会进入到你的监听方法中,然后通过window.orientation来获取当前屏幕的状态:0 - 竖屏90 - 逆时针旋转横屏-90 - 顺时针旋转横屏180 - 竖屏,上下颠倒   如果你不...

[支付宝小程序PHP全栈开发]二、前端样式的设计.acss样式详解

...准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看,LED屏幕上一个一个的发光二极管可以想象为像素。 px为单位导致的问题 我们知道手机屏幕有大...

Sikuli:创新的图形化编程技术

...,可读性极强。脚本执行过程中,利用图像检索算法分析匹配当前屏幕中对应的控件,并对其应用相应的鼠标或键盘操作。这种方式使得我们在脚本编写时,既无需关心繁琐的应用程序相关 API 亦不用获取 Web 内容对象。 编辑...

移动Web开发—处理设备的横竖屏

为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备