반응형 css 예제

미디어 쿼리는 다양한 장치에 맞춤형 스타일 시트를 제공하는 데 널리 사용됩니다. 간단한 예제를 보여 주기 위해 다른 장치에 대 한 배경 색을 변경할 수 있습니다.: 미디어 쿼리의 일반적인 사용, 유연한 레이아웃을 만드는 것입니다. 이 예제에서는 화면 크기에 따라 4개, 2열 및 전체 너비 열이 다른 레이아웃을 만듭니다. 뷰포트 컨트롤을 사용하여 개발자 도구를 반응형 모드로 전환한 반응형 모드를 선택합니다. 반응형 디자인을 제공하는 많은 기존 CSS 프레임워크가 있습니다. 이전 예제에 미디어 쿼리를 추가하면서 너비가 420픽셀 미만인 뷰포트에서 더 나은 레이아웃을 만들기 위해 소수의 스타일을 오버썼습니다. 이 코드를 다시 작성하여 기본적으로 모바일 스타일을 먼저 사용한 다음 너비 420픽셀 이상의 뷰포트에 맞게 조정할 미디어 쿼리를 추가합니다. 제약 조건이 충족됩니다. 예를 들어, 반응형 CSS의 이 부분은 현재 장치가 480px 이상의 너비를 가진 경우에만 사용됩니다: 반응형 웹 디자인은 크거나 작은 상관없이 모든 장치와 모든 화면 크기에서 작동하기에 적합한 웹 사이트를 구축하는 관행입니다.

, 모바일 또는 데스크톱. 반응형 웹 디자인은 모든 사람에게 직관적이고 만족스러운 경험을 제공하는 데 중점을 두어 있습니다. 데스크톱 컴퓨터와 휴대 전화 사용자 모두 반응형 웹 사이트의 이점을 누릴 수 있습니다. 우리가 처음에 본 예, 일기 예보를 살펴보겠습니다. 첫 번째 단계는 작은 화면에서 예측을 멋지게 보이게 하는 것입니다. 반응형 및 적응형 웹 디자인은 밀접하게 관련되어 있으며 종종 동일한 웹 디자인으로 전환됩니다. 응답은 일반적으로 변화에 신속하고 긍정적으로 반응하는 것을 의미하며, 적응형 수단은 변경과 같은 새로운 목적이나 상황에 맞게 쉽게 수정할 수 있습니다. 반응형 디자인 웹 사이트는 뷰포트 너비와 같은 다양한 요인에 따라 지속적으로 유동적으로 변경되며 적응형 웹 사이트는 미리 설정된 요소 그룹에 구축됩니다. 이 두 가지의 조합은 기능적인 웹 사이트에 완벽한 공식을 제공하는 이상적이다. 어떤 용어가 구체적으로 사용되는지는 큰 차이를 만들지 않습니다. 이것은 응답 사이트를 배치의 한 예에 불과했다.

이러한 동일한 기술을 사용하여 모든 종류의 다른 디자인을 구현할 수 있습니다.