Ilegal-pc
Principală | Fisiere | Înregistrare | Autentificare
 
Joi, 28.03.2024, 11:25
Bine aţi venit Vizitator | RSS
Меню сайта
Войти форму

Ip dvs
18.215.15.122
Like
Ora
Principală » Fişiere » Статьи

Медиа Запросы @media в css3
01.07.2013, 08:29
Привет, сегодня мы поговорим о медиазапросах @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;
 }
}

Categorie: Статьи | Adăugat de: Hacker
Vizualizări: 376 | Descărcări: 0 | Comentarii: 1 | Rating: 0.0/0
Total comentarii : 0
Prenume *:
Email *:
Cod *:
Grupul Nostru
Mini Profil
Vizitator

Наш опрос
Evaluează site-ul meu
Total răspunsuri: 2
статистика
Total online: 1
Vizitatori: 1
Utilizatori: 0
Гости сайта Пользователи

Copyright MyCorp © 2024