如何更改宽度和高度取决于分辨率

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%; 
} 
} 

因此，既然，我想要做的就是创建一个类圈缠绕调整，由于不同的屏幕分辨率我的像素大小。但它不能按预期工作。我想由于某种原因，你不能把@media ...你自己的类或标识符，所以我想找到一个解决方案，如何改变我的像素宽度/高度为我的圈子由于不同决议。

任何帮助将非常感谢！您可以使用动态户型单位http://www.w3.org/TR/css3-values/#lengths

或应用媒体

Answer 1

首先选择查询

.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; 
    } 
}