CSS3(@media)判断手机横竖屏

2016年12月06日唯品秀 1851次浏览

相信大家在使用phone/pad在浏览网页时都有这样的感受，横屏/竖屏看网页时，内容一致，但是排班和样式却大不一样；

这也是移动开发过程需要注意的地方，作为web开发人员需要尽可能优化用户体验，横、竖屏显示就是其中很关键的一项：

利用CSS3中@media媒体查询可以很轻易的实现横竖屏不同样式排版定义

举例：

<!DOCTYPE html>

<html>

<head>

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>

效果：

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

标签：

CSS3 横屏移动端

点击这里取消回复。

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！