相信大家在使用phone/pad在浏览网页时都有这样的感受，横屏/竖屏看网页时，内容一致，但是排班和样式却大不一样；
这也是移动开发过程需要注意的地方，作为web开发人员需要尽可能优化用户体验，横、竖屏显示就是其中很关键的一项：
利用CSS3中@media媒体查询可以很轻易的实现横竖屏不同样式排版定义
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<style>
@media all and (orientation : landscape) {
h2{color:red;}/*横屏时字体红色*/
}
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色*/
}
</style>
</head>
<body>
<h2>jquerymobile 判断手机横屏竖屏</h2>
</body>
</html>
效果：
「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」
上一篇：Node.js中模块 – module和exports（四）
最新评论
一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，梦想一旦被付诸行动，就会变得神圣，愿景：成为宇宙中最具有代表性的前端技术类博客。主题开源 
有用！
评：前端黑科技:root之CSS变量var，从此Sass/Less是弟弟（上篇）谬赞了，老师二字不敢当呢
评：前端checkbox、radio样式美化自定义选择框样式
iMJMJ（2周前 (10-11)）我看不错噢，谢谢老师
评：前端checkbox、radio样式美化自定义选择框样式
Adoncn（3周前 (10-04)）感谢分享、学习一下、
评：酷我音乐 - 教你快速制作生成.mp3文件音乐外链iMJMJ（3周前 (10-04)）学习了，涨姿势啊！！
评：Alt_Blog主题后台文章发布格式编辑-简易超实用
ChuHai5（3周前 (10-01)）前来学习！！！！
评：为什么我还要留在北上广，一个8年北漂的4点思考
哎呦，不错喔！