Question

我正忙着设计我的投资组合网站，我有一些图像，我希望能够正确缩放到浏览器或设备的大小。我一直在搞乱vw，似乎很好地解决了这个问题。然而，由于我是一名学生，我正在考虑确保代码是可靠的，因为它不会受到不同浏览器或设备的影响。

所以这里的主要问题是当我在一个图像上使用％来调整高度时，图像会完全消失。我只能使用px或vw使它出现在正确的位置，并试图找出原因？（注意我只需要调整高度，id就像能够使用％，否则我在缩小到较小的设备和浏览器时会产生巨大的差距）

这是我的CSS：

/*----------------------------Top ----------------------------*/
.topwrap{
    position:relative;
    top:50px;
}
.face{
    position:relative;
    float:right;
    background:url(../images/face2.png) no-repeat;
    background-size:100%;
    top:10%;
    width:50%;
    height:15vw;
    right:16%;
    min-width:160px;
}
.txtwrap{
    position:absolute;
    margin-top:1.3%;
    font-size:1.3vw;
    float:right;                
    right:39%;  
    text-align: center;
}
.sptxt{ 
    color:#171717;
    font-weight:bold;
}
.sptxt2{    
    color:#171717;
    font-weight:400;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
    position:relative;
    float:left;
    height:100%;
    width:100%; 
    top:50px;
    padding-top:10px;
    box-shadow: 0px 10px #333 inset;    
}
.contentwrap{
    position:relative;
    width:100%;
    height:15vw;
    background:url(../images/content.png) no-repeat;
    background-size:100%;
    display: block;
    z-index:1;
}

Answer 1

body{ font-size: 16px }
@media screen and (max-width: XXXpx) {body { font-size: 12px } }
@media screen and (max-width: XXXpx) {body { font-size: 8px } }

代码的其余部分，例如填充，边距，你可以使用em / rem，如果能够很好地扩展，根据身体的字体大小;这样你图像之间的“GAP”也会调整大小。

在CSS

1 个答案: