Различные CSS, основанные на ширине

Question

У меня есть сайт, который использует «карточные» виды. При просмотре на рабочем столе я установить CSS для карты как таковой:

width: 75% 
margin: auto 

Я сделал это так «карта» не будет занимать всю ширину, которая выглядит лучше на рабочем столе:

Но я пытаюсь выяснить, как снять ширину и поля автоматически, когда размеры экрана меняются на мобильный экран меньшего размера. Я хочу, чтобы карта была на 100% шириной, если смотреть по мобильному виду по очевидным причинам. Как изменить CSS на основе ширины окна?

Answer 1

Вот стандартный загрузчик mediaqueries.make, что вы поместили этот мета-тег на голове

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 




/*========== Mobile First Method ==========*/ 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 



/*========== Non-Mobile First Method ==========*/ 

/* Large Devices, Wide Screens */ 
@media only screen and (max-width : 1200px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (max-width : 992px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (max-width : 768px) { 

} 

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) { 

} 

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) { 

}