mediaquery 규칙

 

@media 규칙

@media 규칙은 다양한 장치에서 html 문서가 적절한 형태를 갖추게 만들어 주는 규칙입니다. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

all print screen speech 등과 같은 출력장치에 대응할 수 있습니다.

화면 가로형

@media screen and (orientation: landscape ) { /*source code*/ }

화면 세로형

@media screen and (orientation: portrait ) { /*source code*/ }

 

 

html 문서에 적용 방식

link 방식 -
ex)

<link rel=”stylesheet” href=”desktop.css” media=”screen”>
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

 

@import-

ex)

@import url(“print.css”) print;

 

<style></style>

ex)

<style>
@media screen and ( max-width: 767px ) {
/*Default. Used for all media type devices Used for printers
Used for computer screens, tablets, smart-phones etc.
Used for screenreaders that "reads" the page out loud*/
}
</style>