반응형 css 예제

왜 우리가 정확히 992px와 600px를 사용하는지 궁금하십니까? 그들은 우리가 장치에 대한 “전형적인 중단점”이라고 부르는 것입니다. 응답성 웹 디자인 자습서에서 일반적인 중단점에 대해 자세히 확인할 수 있습니다. 반응형 웹 디자인은 유연한 레이아웃, 미디어 쿼리 및 유연한 미디어를 포함한 세 가지 주요 구성 요소로 나뉩습니다. 첫 번째 부분인 유연한 레이아웃은 모든 너비에 동적으로 크기를 조정할 수 있는 유연한 그리드를 사용하여 웹 사이트의 레이아웃을 구축하는 방법입니다. 유연한 그리드는 상대 길이 단위(가장 일반적으로 백분율 또는 em 단위)를 사용하여 빌드됩니다. 그런 다음 이러한 상대 길이를 사용하여 너비, 여백 또는 패딩과 같은 공통 그리드 속성 값을 선언합니다. 높이 및 너비 피쳐는 뷰포트 렌더링 영역의 높이와 너비, 예를 들어 브라우저 창을 기반으로 합니다. 이러한 높이 및 폭 미디어 피쳐의 값은 길이 단위, 상대 또는 절대값일 수 있습니다. 예를 들어 브라우저의 너비가 600px에서 900px 사이인 경우

요소의 모양을 변경합니다.

예를 들어, 응답CSS의 이 부분은 현재 장치가 480px 이상의 너비를 가진 경우에만 사용됩니다: 팁: 열 레이아웃을 만드는 보다 현대적인 방법은 CSS Flexbox를 사용하는 것입니다(아래 그림 참조). 그러나 Internet Explorer 10 및 이전 버전에서는 지원되지 않습니다. IE6-10 지원이 필요한 경우 위와 같이 부동 부동 을 사용합니다. 이러한 합리적인 증분 집합을 사용하면 대부분의 장치를 대상으로 지정할 수 있습니다. 실제로 일반적으로 앞서 언급한 페이지 너비의 모든 예제를 별도로 처리할 필요가 없습니다. 내 경험에 따르면, 320px, 768px 및 1200px가 가장 일반적으로 사용됩니다. 이 세 가지 값은 각각 스마트 폰, 태블릿 / 랩톱 및 데스크톱을 대상으로하기에 충분해야합니다. 미디어 쿼리 내에서 논리 연산자 및 논리 연산자를 사용하면 추가 조건을 추가하여 브라우저 또는 장치가 a, b, c 등을 모두 수행하도록 할 수 있습니다. 여러 개의 개별 미디어 쿼리를 쉼표로 구분하여 무언 또는 연산자로 사용할 수 있습니다. 아래 예제는 800~1024픽셀 너비사이의 모든 미디어 유형을 선택합니다.

Comments are closed.