Как изменить ширину и высоту в зависимости от разрешений

Question

Я пытаюсь создать адаптируемую веб-страницу, на которой у меня есть несколько кругов. Дело в том, что в зависимости от того, какой размер экрана я использую, круги выглядят как яйца или похожие круги, в зависимости от экрана, который вы видите на нем. Я решил эту проблему, и это потому, что я работаю с% width и height, поэтому, когда вы переходите на квадрат или прямоугольник, он меняет вид.

Поэтому я решил использовать фиксированные размеры, поэтому он работает одинаково со всеми размерами экрана. Но, конечно, когда вы переходите к разным разрешениям экрана, эти круги выглядят больше или меньше. Я пытался поставить это:

@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 ... свои собственные классы или идентификаторы, поэтому я пытаюсь найти решение о том, как изменить динамическую ширину и высоту пикселя для моих кругов из-за разных резолюции.

Любая помощь была бы действительно оценена!

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