唯品秀前端博客

相信大家在使用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>

效果:

 

 

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(1) 打赏

上一篇:

下一篇:

相关推荐

1 条评论关于"利用CSS3(@media)判断手机横竖屏"

表情

最新评论

  1. 你卖什么萌呐~
    未知操作系统 未知浏览器

    哎呦,不错喔!

  2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏