CSS3(@media)判断手机横竖屏 (实用、赞）

最新推荐文章于 2024-05-17 03:51:37 发布

Michael18811380328

最新推荐文章于 2024-05-17 03:51:37 发布

阅读量521

点赞数

文章标签： css3 手机前端 css html

本文链接：https://blog.csdn.net/weixin_41697143/article/details/129012225

版权

CSS3(@media)判断手机横竖屏 (实用、赞)

原文出处：https://jingyan.baidu.com/article/455a9950aa8aaea16627788a.html 相似文章：CSS之响应式Web设计(横屏/竖屏提醒)

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

Michael18811380328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3(@media)判断手机横竖屏 (实用、赞）

CSS3(@media)判断手机横竖屏 (实用、赞)原文出处：https://jingyan.baidu.com/article/455a9950aa8aaea16627788a.html相似文章：CSS之响应式Web设计(横屏/竖屏提醒)相信大家在使用phone/pad在浏览网页时都有这样的感受，横屏/竖屏看...
复制链接

扫一扫