判断手机横竖屏并执行不同CSS

当你不想设计网页的竖屏样式…


@media screen and (orientation: portrait) {

  }
/*若为竖屏,则执行大括弧内的元素*/
@media screen and (orientation: landscape) {

  }
/*若为横屏,则执行大括弧内的元素*/

在主页面index.php的<body>下加入<div class=”screentip”></div>

style.css内加入

.screentip {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000 url(img/landscape.svg) no-repeat center center;
  background-size: cover;
  z-index: 7;
  display: none;
  }

/*(此方案不让用户查看竖屏)landscape.svg换成自己的文件*/
guest
0 Comments
Inline Feedbacks
View all comments