@media 질문

Question

저는 반응형 웹을 만들 때 항상 @media 만 사용했었는데

@media screen and (max-width: 1050px) 이런 코드를 보게 되서

 

두개의 차이점이 뭔지 궁금합니다

인터넷에서 본것들이 이해가 잘 안되서 자세한 설명을 듣고 싶어요

애드프로 · Accepted Answer

보통 기본값은 all 인데

선택자에 따라서 해당 화면의 구성을 적용하냐 마냐를 나누는거에요.

screen 이면 화면 표시장치가 있는 디바이스 기준입니다. (모니터,모바일기기 등..)

 

그 외 음성이라던가 여러가지 디바이스를 구분하고 있습니다.

마르스컴퍼니 · Answer

https://offbyone.tistory.com/121

 

@media screen and (max-width: 768px) {

=> 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것
 

@media (max-width: 768px) {...}
=> 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용

 

미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과

Big1 · Answer

CSS 미디어 타입입니다

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

screen / print / speech / all 

 

css 파일 불러올때 이렇게도 쓰죠

병원에서일해요 · Answer

@media를 쓰셨다면 왜 쓰시는지는 알고 계시는거죠?

그 뒤에 있는 것들은 크기를 제어하는거입니다

 

max-width면 0~1050까지만 적용되는거입니다.

@media 질문

답변 4개 / 댓글 1개

답변에 대한 댓글 1개

@media 질문

답변 4개 / 댓글 1개

답변에 대한 댓글 1개

공유하기