- — CSS, - . - - . , Media Queries — CSS3, , . W3C 2012 - .
- CSS , (, ), (, ) (, ). , , - - , .
- CSS Hocon Wium Lie 1994 , CSS1. HTML4 1997 , .
2000 W3C Media Queries. - 2001 . W3C 2012 , .
CSS -?
HTML- - .CSS, . - CSS:
@media screen and (max-width: 768px)
{
header { height: 70px; }
article { font-size: 14px; }
img { max-width: 480px; }
}
, 768 . , , , -.
- CSS3?
- - . , , , , . CSS, - . , , , — . .
, -, . - CSS :
, HiDPI ( ) .
- CSS? -, true, false. , , , , , . , - CSS, . , .
HTML-, «media» <link>. «media» , . XML-, @import at-rule @media at-rule. «» , .
CSS?
CSS (Cascading Style Sheet ) -, , -, HTML- .
CSS - . HTML CSS. , , CSS. , CSS . , - 10 12 pt -. , , .
CSS , -. , CSS , , , . CSS, HTML, - , -.
-
. - , , , . , CSS- : @media print {...}.
. , @media - : @media screen, print {...}.
- CSS
, . , , , . , (, ) : @media (hover: hover) {...}.
— , , «min-» «max-» . , , 12,450px: @media (max-width: 12450px) {...}.
, , . , CSS : @media () {...}.
, , , , . , , , , : @media speech ( : 11/5) {...}.
- — , CSS . , , , , .
, , - <source>, , , <picture>.
Window.matchMedia () . MediaQueryList.addListener () . , .
- . . , .
— -, . , , - . , CSS - (media queries) — , — , .
CSS- - , . CSS, . : <link rel = "stylesheet" media = " (min-width: 320px) (max-width: 480px)" href = "css/yourstylesheet.css" />.
CSS :
@media screen and (min-width:320px)
and (max-width:480px){
/*Insert your styles here
}.
- CSS , , . , CSS . , , CSS3. , - CSS. , , .
— . , , . . , :
img {
max-width: 100%;
}
, , . 100% , , .
, , . , . Adaptive Images — , . - Framework Foundation .
SVG, -, - CSS.