使用css3匹配手机屏幕横竖状态
2014-01-27 11:41
246 查看
@media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效。
1.头部声明
加到
2. media匹配屏幕是横屏还是竖屏
3. 应用的地方
(1)手机WEB页面元素内容一般都是通过百分比定义的,以便能够在不同分辨率设备下都能正常显示,虽然这样,但是移动设备的屏幕分辨率宽度和高度相差还是很大,同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大,这样就会失去页面的美观性,这样,如果用orientation匹配屏幕的翻转状态,就可以写不同的css加以控制页面样式。
(2)对于有背景图的移动WEB页面,可以根据orientation匹配屏幕屏幕状态,设置不同的background。
(3)稍微有技术的一点:某些有绝对定位元素的WEB页面,将某元素定位到页面底部,当屏幕是竖屏状态时,可能因为页面总长度小于屏幕高度(但是大于屏幕宽度),这时将绝对定位元素定位到底部是正确的,但是当屏幕翻转成为横屏时,此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度),绝对定位元素会覆盖在页面内容之上,导致页面出现问题,这时可用orientation匹配屏幕状态,调整css代码。
关于匹配屏幕横竖屏状态还可通过JS判断,js中onorientationchange是window的一个事件,可以通过监听事件匹配屏幕横竖屏。
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) { </p> <p>/* 这是匹配横屏的状态,横屏时的css代码 */ body { background-color: #ff0000; } } @media all and (orientation : portrait){ </p> <p>/* 这是匹配竖屏的状态,竖屏时的css代码 */ body { background-color: #00ff00; } }
3. 应用的地方
(1)手机WEB页面元素内容一般都是通过百分比定义的,以便能够在不同分辨率设备下都能正常显示,虽然这样,但是移动设备的屏幕分辨率宽度和高度相差还是很大,同样的页面在屏幕翻转过来时可能百分比定义的元素宽度会变得非常大,这样就会失去页面的美观性,这样,如果用orientation匹配屏幕的翻转状态,就可以写不同的css加以控制页面样式。
(2)对于有背景图的移动WEB页面,可以根据orientation匹配屏幕屏幕状态,设置不同的background。
(3)稍微有技术的一点:某些有绝对定位元素的WEB页面,将某元素定位到页面底部,当屏幕是竖屏状态时,可能因为页面总长度小于屏幕高度(但是大于屏幕宽度),这时将绝对定位元素定位到底部是正确的,但是当屏幕翻转成为横屏时,此时因为页面内容高度大于屏幕高度(就是未翻转时屏幕宽度),绝对定位元素会覆盖在页面内容之上,导致页面出现问题,这时可用orientation匹配屏幕状态,调整css代码。
关于匹配屏幕横竖屏状态还可通过JS判断,js中onorientationchange是window的一个事件,可以通过监听事件匹配屏幕横竖屏。
相关文章推荐
- CSS3匹配屏幕横竖状态
- 使用asm.jar将Android手机屏幕投影到电脑
- New UI-获取手机屏幕尺寸与分辨率,屏幕适配,横竖屏问题 .
- 使用JS判断移动端手机横竖屏状态
- 使用asm.jar将Android手机屏幕投影到电脑
- 使用ViewSwitcher模拟手机屏幕应用分屏和切换
- 使用JS 正则 匹配手机号码输入格式是否正确
- Android系统亮屏、锁屏、屏幕解锁事件(解决部分手机亮屏后未解锁即进入resume状态)
- css3 使用animation 只执行一次然后停留在执行后的状态
- 使用python检测手机QQ在线状态的脚本代码
- iPhone使用QuickTime Player录制手机屏幕
- 如何得到手机屏幕的分辨率--使用记录
- 同步手机真机屏幕到PC上的软件使用方法
- 使用CSS3 Media Query技术适配Android平板屏幕分辨率和屏幕密度
- 使用asm.jar将Android手机屏幕投影到电脑
- 同步手机真机屏幕到PC上的软件使用方法
- 监听手机wifi状态 实现接口WifiStateListener 即可使用
- 【 Android】使手机屏幕常亮,不进入待机状态
- Android使用Displaymetrics类获取一下手机屏幕中的一些信息,获取屏幕分辨率
- android 获取手机屏幕状态(唤醒睡眠)