这个问题在这里已有答案:
我有两种不同的移动和桌面设计。当我尝试恢复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;
}
}
我的桌面版本看起来不错,但桌面版本也开始流行。但我尝试了不同的移动设计并隐藏了移动设备上的桌面。
您应该尝试媒体查询。这将允许您管理所有类型设备的样式。
看看这个,它做得很好:
下一个代码块即将到来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
}