0

我正在尝试制作一个适应性强的网页，上面有一些圆圈。问题是：根据我使用的屏幕尺寸，圆圈看起来像鸡蛋或圆圈，这取决于你在它看到的屏幕。我已经解决了这个问题，这是因为我使用 % 宽度和高度，所以当你进入方形或矩形屏幕时，它会改变视图。

所以我决定使用固定尺寸，所以它适用于所有屏幕尺寸。但是，当然，当您使用不同的屏幕分辨率时，这个圆圈看起来会更大或更小。我试着把这个：

@media screen (min-width: 1620px)
{
    html
    {
        font-size: 100%;
    }
.circle-wrap 
{ 
    width:150px; 
    height:150px;   
    position:absolute; 
    float:left; 
    text-decoration:none; 

    /* Multiple compatibility with border radius */
    /* CSS 3 */
    border-radius: 50%;
    /* Firefox versiones 3.x */
    -moz-border-radius: 50%;
    /* Safari desde 3.2 hasta la 4 */
    -webkit-border-radius: 50%;
    /* Khtml Conqueror */
    -khtml-border-radius: 50%;
}
}

因此，我想做的是创建一个类circle-wrap来调整我的像素大小，因为屏幕分辨率不同。但它没有按预期工作。我想由于某种原因你不能放在@media ...你自己的类或标识符上，所以我试图找到一个解决方案，解决如何因分辨率不同而动态地改变我的圆圈的像素宽度/高度。

任何帮助将非常感激！

4

1 回答 1

2

第一个选项，您可以使用动态尺寸单位http://www.w3.org/TR/css3-values/#lengths

或应用媒体查询

.circle-wrap { 
    position:absolute; 
    float:left; 
    text-decoration:none; 

    /* Multiple compatibility with border radius */
    /* CSS 3 */
    border-radius: 50%;
    /* Firefox versiones 3.x */
    -moz-border-radius: 50%;
    /* Safari desde 3.2 hasta la 4 */
    -webkit-border-radius: 50%;
    /* Khtml Conqueror */
    -khtml-border-radius: 50%;
}
@media screen and (min-width: 1620px) {
    .circle-wrap { 
        width:150px; 
        height:150px;
    }
}
@media screen and (max-width: 1620px) and (min-width: 1024px) {
    .circle-wrap { 
        width:125px; 
        height:125px;
    }
}
@media screen and (max-width: 1024px) {
    .circle-wrap { 
        width:100px; 
        height:100px;
    }
}
于 2012-06-25T08:54:31.910 回答