Привет, сегодня мы поговорим о медиазапросах @media в css3. С появлением css3, появилось больше возможностей для верстки адаптивного макета и @media нам в этом поможет. С помощью данного медиазапроса мы можем применять различные стили к разным размерам устройства. Давайте рассмотрим на примере:
@media /*only*/ screen and (max-width:1280px) {
.block {
//различные стили для данного класса
}
}
Данный код позволит нам применять стили в том случае, если мы хотим, чтобы нужный стиль был применен, когда размер монитора(если поставить only, то стиль будет применен ТОЛЬКО, если устройство screen)(and - логическое И) был меньше либо равен 1280px (max-width:1280px) Можно так же сделать очень интересный, анимированный эффект:
*{
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.block {
margin: 10px auto;
width:580px; height: 100px;
background: #88aadd;
}
@media screen and (max-width:1000px) {
.block {
margin: 10px auto;
width: 200px; height:50px;
background: #335a9d;
}
}
|