반응형 웹 디자인이란?

반응형 웹 디자인이란?

반응형 웹 디자인은 디자인과 개발이 사용자의 요구에 부응해야 한다고 제안하는 접근 방식입니다.
화면 크기, 플랫폼 및 방향에 따라 동작 및 환경.

메타 태그

width 속성은 뷰포트의 크기를 제어합니다. 너비=600 또는 다음과 같은 특정 픽셀 수로 설정할 수 있습니다.
특수 값 device-width는 100% 배율에서 CSS 픽셀 단위의 화면 너비입니다. (해당 높이가 있습니다
및 장치 높이 값(표시 영역 높이에 따라 크기 또는 위치가 변경되는 요소가 있는 페이지에 유용할 수 있음)

<meta name="viewport" content="width=device-width; initial-scale=1.0">

페이지 너비

데스크탑용, 태블릿(또는 랩탑)용 및
스마트폰.불행히도 타겟팅할 페이지 너비에 대한 정의된 표준은 없지만 다음 예시는 반응형 값입니다.
자주 사용됩니다:

    320px
    480px
    600px
    768px
    900px
    1024px
    1200px

이러한 합리적인 증분 세트를 사용하면 대부분의 장치를 대상으로 지정할 수 있습니다. 실제로는 일반적으로 필요하지 않습니다.
앞서 언급한 페이지 너비의 예를 모두 별도로 처리하는 것은 7가지 다른 해상도일 수 있습니다.

어떤 기기를 타겟팅해야 하나요?

가장 순수한 대답은 그들 중 누구도 아닙니다.
점점 더 많은 장치가 시장에 출시될 것이며 767px의 장치가 480px를 가정하는 것은 어리석은 것처럼 보입니다.
중단점을 설정하는 곳이기 때문입니다. 대신 800px로 설정하고 다시
600px(또는 디자인이 좋지 않은 시점)이면 다음 주와 향후 몇 년 동안 출시될 모든 장치를 다룹니다.

모바일 퍼스트

모바일 디자인에 먼저 접근하는 것이 반응형 디자인을 위한 최상의 접근 방식입니다. 그것은 당신이 레이아웃을 할 수 있습니다
가장 작은 화면 공간에서 고객에게 가장 중요한 콘텐츠를 명확하고 논리적으로 전달합니다.
이렇게 하면 사이트에서 가장 중요한 정보가 무엇인지 실제로 식별할 수 있습니다.

미디어 쿼리

CSS3는 CSS 2.1과 같은 모든 미디어 유형(예: 스크린, 인쇄 및 핸드헬드)을 지원하지만 수십 가지가 추가되었습니다.
최대 너비, 장치 너비, 방향 및 색상을 포함한 새로운 미디어 기능. 의 출시 이후에 만들어진 새로운 장치
CSS3(예: iPad 및 Android 장치)는 확실히 미디어 기능을 지원합니다. 따라서 다음을 사용하여 미디어 쿼리를 호출합니다.
이러한 장치를 대상으로 하는 CSS3 기능은 잘 작동합니다.

일반적인 중단점:

    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV

통사론

@media media type and (condition: breakpoint) {
  // CSS rules
}