移动和桌面的不同设计[重复]

问题描述 投票:-2回答:1

这个问题在这里已有答案:

我有两种不同的移动和桌面设计。当我尝试恢复Chrome时,移动版本看起来不错,但是当我在手机上查看它根本没有显示我。桌面版本都很清晰。

我试过display function none并在css中阻塞。

HTML

<body>

   <div class="row" >
    <div class="column">
      <img src="logo.png" style="position: absolute; padding-top: 15%;">
    </div>
    <div class="column1">
      <img src="new.png" style="position: fixed;z-index: -1">
      <div class="links">
        <h1><a href="http://okdateme.com" target="_blank">FIND A PARTNER</a></h1>
        <h1><a href="https://stayaunty.com" target="_blank">BOOK A ROOM</a></h1>
        <h1><a href="https://www.thatspersonal.com/" target="_blank">EXPLORE YOUR FANTASIES</a></h1>
      </div>
    </div>
  </div>

  <div class="mobile">
    <img src="logo.png" style="width: 100%;">
  <div>
    <img src="new.png" style="width: 100%; position: absolute; z-index: -1; margin-top: -25px;">
    <h2><a href="http://okdateme.com">FIND A PARTNER</a></h2>
    <h2><a href="https://stayaunty.com">BOOK A ROOM</a></h2>
    <h2><a href="https://www.thatspersonal.com/">EXPLORE YOUR FANTASIES</a></h2>
  </div>

  </div>

CSS

body
{
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #000;
}

.row:after{
    clear:both;
  background-color: #000;
}

.column { 
  width: 33.33%;
  float: left;
}

.column1 {
  width: 66.66%;
  float: right;
  position: relative;
}

.links{
    font-family: Comic Sans MS;
    margin-top: 30%;
}


a{
    text-decoration: none;
    color: #cc3366;
    z-index: 9999;  
    position: relative;
    background-color: #000;
}

@media(min-width: 768px){
  .mobile{
    display: none;
  }
}

@media(max-width: 767px) {
  .row:after, .column, .row{
    display: none;
  }
}

@media (max-width: 767px) {
  div.row, .column, .column1{
    display: none;
  }

.mobile{
  display: all;
}

a{
  color: #fff;
  background-color: #999900;
  font-family: Comic Sans MS;
}


}

我的桌面版本看起来不错,但桌面版本也开始流行。但我尝试了不同的移动设计并隐藏了移动设备上的桌面。

html css css3 responsive
1个回答
0
投票

您应该尝试媒体查询。这将允许您管理所有类型设备的样式。

看看这个,它做得很好:

下一个代码块即将到来from this source

/* 
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}
© www.soinside.com 2019 - 2024. All rights reserved.