@media 질문
본문
저는 반응형 웹을 만들 때 항상 @media 만 사용했었는데
@media screen and (max-width: 1050px) 이런 코드를 보게 되서
두개의 차이점이 뭔지 궁금합니다
인터넷에서 본것들이 이해가 잘 안되서 자세한 설명을 듣고 싶어요
답변 4
보통 기본값은 all 인데
선택자에 따라서 해당 화면의 구성을 적용하냐 마냐를 나누는거에요.
screen 이면 화면 표시장치가 있는 디바이스 기준입니다. (모니터,모바일기기 등..)
그 외 음성이라던가 여러가지 디바이스를 구분하고 있습니다.
CSS 미디어 타입입니다
https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
screen / print / speech / all
css 파일 불러올때 이렇게도 쓰죠
<link rel="stylesheet" media="print" ...>
https://offbyone.tistory.com/121
@media screen and (max-width: 768px) {
=> 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것
@media (max-width: 768px) {...}
=> 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용
미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과
@media를 쓰셨다면 왜 쓰시는지는 알고 계시는거죠?
그 뒤에 있는 것들은 크기를 제어하는거입니다
max-width면 0~1050까지만 적용되는거입니다.
아 의미가 잘못 전달 된 것 같아요.
제가 궁금한건 max-width 의 내용이 아니라
@media 와 @media screen and 의 차이점이 궁금한 겁니다