相信大家在使用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前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，梦想一旦被付诸行动，就会变得神圣，愿景：成为宇宙中最具有代表性的前端技术类博客。主题开源 
很详细啊，好好了解一下，多谢分享
评：2021年投资理财20年长投计划，老光棍的通往财富自由之路上班时间还是得工作为主呢
评：Alt_Blog主题模板安装使用简易教程-附视频教程很好啊，顶一下
评：碎言碎语
上班没事过来升级主题
后台有配置的
评：碎言碎语学习一下~~~~支持顶起
评：ES2018 新特性Promise.finally()是个啥你有了解吗？
哎呦，不错喔！