Question

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

所以我决定使用固定尺寸，因此它对所有屏幕尺寸的工作方式相同。但是，当然，当你进入不同的屏幕分辨率时，这个圆圈看起来更大或更小。我试着说：

@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 ... 你自己的类或标识符，所以我试图找到一个关于如何改变我的像素宽度/高度的解决方案由于分辨率不同，我的圈子。

任何帮助都会非常感激！

Answer 1

第一个选项，您可以使用动态尺寸单位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;
    }
}

如何根据分辨率更改宽度和高度

1 个答案: