使用css3匹配手机屏幕横竖状态
发布时间：2014-01-27 11:41:54 作者：佚名 
我要评论
我要评论下面简单讲解一下用css3的@media orientation匹配手机屏幕是横屏还是竖屏的使用方法，大家参考使用吧
@media是css3中新定义的，功能非常强大，顾名思义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) { </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中的字体及相关属性，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-06-12
- 本文详细解析了CSS3中实现账号密码输入框提示特效的原理和方法，包括HTML5的placeholder属性与CSS3新特性如伪类选择器、动态效果和过渡动画的结合使用，感兴趣的朋友跟随小2025-05-14
- CSS3的布局特性为前端开发者提供了无限可能，无论是Flexbox的一维布局还是Grid的二维布局，它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局，本文给大家介绍C2025-05-14
CSS3 Facebook-style Buttons 项目常见问题及最新解决方案
CSS3 Facebook-style Buttons 是一个开源项目，旨在通过简单的 CSS 代码来重现 Facebook 按钮和工具栏的外观，本文给大家介绍CSS3 Facebook-style Buttons 项目常见问题及2025-05-14使用animation.css库快速实现CSS3旋转动画效果
随着Web技术的不断发展，动画效果已经成为了网页设计中不可或缺的一部分，本文将深入探讨animation.css的工作原理，如何使用以及其在实际项目中的应用,感兴趣的朋友一起看2025-05-14
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19
最新评论