0

我正在一个需要响应式设计的网站上工作。我构建的桌面版本非常好，并且在所有资源上都能很好地工作。然而，当谈到手机和平板电脑时，我遇到了我在图像上的绝对定位问题。我已将 px 换成 % ，这在一定程度上有效，但如果在像我这样的 27"imac 上会变得丑陋！

一些CSS：

img.redpin{
    position:fixed;
    float:left;
    margin-left:-480px;
    z-index: 999999;
}

img.yellowpin{
    position:fixed;
    float:left;
    margin-top:40px;
    margin-left:-400px;
    z-index: 999999;
}

img.greenpin{
    position:fixed;
    float:left;
    margin-top:-20px;
    margin-left:-150px;
    z-index: 999999;
}


img.carrot{
    position:absoloute;
    margin-top: 16px;
    margin-left: -10px;
    padding: 0px;
    float:left;
    z-index: 222222;
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg); /* IE 9 */
    -webkit-transform:rotate(-7deg); /* Safari and Chrome */
height: 240px;
    max-width: 100%;    
    max-height: 100%;
    width: 220px;
    border: solid 5px #fff;
    -webkit-box-shadow: 0px 3px 4px 0px #2d2d2d;
box-shadow: 0px 3px 4px 0px #2d2d2d; 
}
img.potatos{
    position:absoloute;
    margin-top: 70px;
    margin-left: -40px;
    padding: 0px;
    float:left;
    z-index: 333333;
    transform:rotate(6deg);
    -ms-transform:rotate(6deg); /* IE 9 */
    -webkit-transform:rotate(6deg); /* Safari and Chrome */
    max-width: 100%;    
    max-height: 100%;   
    height: 240px;
    width: 220px;
    border: solid 5px #fff;
    -webkit-box-shadow: 0px 3px 4px 0px #2d2d2d;
box-shadow: 0px 3px 4px 0px #2d2d2d; 
}
img.garden{
    position:absoloute;
    margin-top: 5px;
    margin-left: -30px;
    padding: 0px;
    float:left;
    z-index: 444444;
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg); /* IE 9 */
    -webkit-transform:rotate(-7deg); /* Safari and Chrome */
    height: 240px;
    width: 220px;
    border: solid 5px #fff;
    -webkit-box-shadow: 0px 3px 4px 0px #2d2d2d;
box-shadow: 0px 3px 4px 0px #2d2d2d; 
    }
img.sticky{
    position:absoloute;
    margin-top: -110px;
    margin-left: 170px;
    padding: 0px;
    float:left;
    z-index: 555555;
    transform:rotate(3deg);
    -ms-transform:rotate(3deg); /* IE 9 */
    -webkit-transform:rotate(3deg); /* Safari and Chrome */
    height: 199px;
    width: 280px;
}

以上所有内容都位于以下 div 中：

#mainpagetop{
    background-image:url(/wp-content/themes/GYO/images/topdivbg.png);
    height: 330px;
    max-width : 920px; width: 100%;
    margin-top: -20px;
}

好的，所以 mainpagetop div 可以完美缩放，但内部不是很好，我需要它们缩小​​尺寸，如果在移动设备上查看，最好删除其中一个图像。

4

0 回答 0