내 이동 미디어 쿼리를 공유합니다!

안녕! 이 블로그에서는 사용 방법을 배우면서 가능한 한 응답성이 뛰어난 프로젝트를 얻기 위해 미디어 쿼리 조합으로 이동하는 방법에 대해 이야기할 것입니다.

저처럼 코드 초보라면 함께 배워보아요! 당신이 더 발전했다면 더 배우고 싶기 때문에 당신이 자원으로 가는 것이 무엇인지 알려주세요!

먼저, 미디어 쿼리란?

평신도 용어로 설명할 수 있는 가장 좋은 점은 미디어 쿼리가 CSS 기술이거나 중단점을 설정하여 해당 디자인 요소가 중단점마다 다르게 동작하는 중단점을 설정하여 DOM 인라인에서 요소/미디어를 조작하는 방법이라는 것입니다.

YES! You can manipulate elements on the DOM with it! 
A couple of ways to do so is through HTML, CSS or JavaScript.

내 이동 경로는 CSS이지만 모든 조합을 확실히 사용할 수 있습니다.

제가 자주 사용하는 미디어 쿼리 조합은 다음과 같습니다.

작업 중인 프로젝트에서 모두 사용하고 있으며 현재 이를 사용하여 이전 프로젝트를 업데이트하고 있습니다.

SIZES MAY VARY DEPENDING ON WHAT DEVICES YOU WANT TO FOCUS ON

/*low resolution tablets, mobiles (portrait)*/
@media (min-width: 320px) and (max-width: 480px){

}


/*low resolution tablets, mobiles (landscape)*/
@media (min-width: 481px) and (max-width: 767px){
}


/*tablets, ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1024px){

}


/*tablets, ipads (landscape)*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){

}

실제로 보고 싶습니까? 내 웹 앱 중 하나를 예로 들어 보겠습니다.
아래의 모든 화면 캡처 및 전환된 모바일 보기는 내 브라우저에서 콘솔을 사용하여 얻은 것입니다.

물론 기본적으로 웹앱의 데스크톱 버전부터 시작할 것입니다.

- 여기에서 이미 'profile_sideNav' 클래스가 있는 요소에 대해 설정된 CSS가 있음을 알 수 있습니다.

NOW, ADDING OUR PORTRAIT LOW-RES MOBILE & TABLET MEDIA QUERY
@media (min-width: 320px) and (max-width: 480px){  
}

- 일부 값이 변경되고 일부 새 값이 추가되었는지 확인합니다. 그러나 여전히 해당 요소의 동일한 CSS 선택기를 사용하고 있습니다.

WE CAN SAY THE SAME FOR LANDSCAPE, KEEPING THE SAME VALUES
@media (min-width: 481px) and (max-width: 767px){
}

WHAT ABOUT PORTRAIT TABLETS YOU SAY?
@media (min-width: 768px) and (max-width: 1024px){

}

YES-CAN-DO FOR IPADS AND TABLETS ON LANDSCAPE TOO!
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
}
As you noticed values are the same from portrait to landscape. 
You might be wondering why declare if its the same values?

- 내 경험에 따르면 데스크탑 버전 값이 우세해지는 것을 원하지 않는다면 여전히 그렇게 해야 합니다.

저는 이 과정에서 미디어 쿼리를 공식화하고 요소/구성 요소별로 이동할 때 모바일을 먼저 수행하는 방법을 배웠습니다. 저에게는 따라하기가 더 쉽고 작업 흐름이 복잡하지 않습니다.

CSS-tricks guide to media query에서 각 크기의 역할에 대한 훌륭한 해부학적 분석을 보았습니다. 나는 미디어 쿼리를 배우기 시작하는 나와 같은 다른 코드 뉴비를 도울 수 있기를 희망하여 광산이 어떻게 나타나는지 보여주고 있습니다.

이것이 내 앱에서 만든 차이점을 보는 사람에게 도움이 되었기를 바랍니다!

참조:
CSS Tricks
Query generator
SplashGlam - 데모에 사용된 스킨케어 웹앱입니다.

다음까지!