>웹 프론트엔드 >H5 튜토리얼 >반응형 레이아웃이란 무엇입니까? 반응형 레이아웃 소개

반응형 레이아웃이란 무엇입니까? 반응형 레이아웃 소개

不言
不言원래의
2018-10-18 10:59:285477검색

반응형 레이아웃이란 무엇인가요? 요즘 반응형 레이아웃이 점점 대중화되고 있지만, 아직도 반응형 레이아웃이 무엇인지 모르는 친구들이 많습니다. 그래서 관심 있는 친구들은 다음 글에서 반응형 레이아웃이 무엇인지 소개하겠습니다.

먼저 살펴보겠습니다반응형 레이아웃이란 무엇인가요?

Baidu Encyclopedia에 따르면 반응형 레이아웃은 Ethan Marcotte가 2010년 5월에 제안한 개념입니다. 간단히 말해서 각 터미널에 특정 레이아웃을 만드는 것이 아니라 여러 터미널과 호환될 수 있는 웹사이트입니다. 버전. 이 개념은 모바일 인터넷 브라우징을 해결하기 위해 탄생했습니다.

일반인의 관점에서 반응형 레이아웃은 동시에 여러 터미널과 호환되는 웹사이트를 만들고, 하나의 웹사이트를 여러 웹사이트로 변환하여 리소스를 크게 절약하는 것을 의미합니다.

반응형 인터페이스에는 4가지 수준이 있습니다.

1. 동일한 페이지는 다양한 크기와 비율에서 편안해 보여야 합니다.

2. 동일한 페이지는 다양한 해상도에서 합리적으로 보여야 합니다. 다양한 조작 방법(예: 마우스, 터치 스크린)은 통일되어야 합니다.

5. 다양한 유형의 장치(휴대폰, 태블릿, 컴퓨터)에서 동일한 페이지의 상호 작용 방법은 일관되게 익숙해져야 합니다.

반응형 레이아웃이 무엇인지 알아보신 후, 반응형 레이아웃의 사용법에 대해 간단히 이야기해보겠습니다

1. 레이아웃 및 메타태그 설정

반응형 웹사이트, 비반응형 웹사이트를 만들 때 웹사이트가 반응형이 되면 우리는 먼저 요소의 레이아웃에 주의를 기울여야 합니다. 예를 들어 모바일 장치에서는 사용자가 화면을 확대하는 것을 금지해야 합니다. 금지하지 않을 경우 디스플레이 정렬 불량이 발생할 수 있으며, 디스플레이가 모바일 웹사이트 스타일과 맞지 않을 수 있습니다. 따라서 일반적인 모바일 웹사이트 효과를 얻으려면 사용자가 휴대폰에서 화면을 확대/축소하는 것을 금지하는 코드를 사용해야 합니다.

2. 미디어 쿼리를 통해 스타일 설정 미디어 쿼리

미디어 쿼리는 브라우저와 통신하고 브라우저에 페이지 렌더링 방법을 알려줄 수 있습니다. 이렇게 할 수 있습니다. 쓰기, 이때 레이아웃은 이전에 설정된 레이아웃을 덮어쓰게 됩니다.

3. 다양한 보기 너비 설정

4. 반응형 사진

여기에서는 반응형 레이아웃의 사용법을 간략하게 소개하므로 PHP 중국어 웹사이트의 관련 항목을 참고하세요. 배우다! ! !

위 내용은 반응형 레이아웃이란 무엇입니까? 반응형 레이아웃 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.