html5 반응형 레이아웃_html5 튜토리얼 기술에 대한 간략한 토론
- WBOY원래의
- 2016-05-16 15:46:581322검색
1. 반응형 레이아웃이란 무엇인가요?
반응형 레이아웃은 Ethan Marcotte가 2010년 5월에 제안한 개념입니다. 간단히 말해서, 이는 각 터미널마다 특정 버전을 만드는 것이 아니라 웹사이트가 여러 터미널과 호환될 수 있다는 것을 의미합니다.
이 개념은 모바일 인터넷 브라우징을 해결하기 위해 탄생했습니다. 반응형 레이아웃은 다양한 단말기의 사용자에게 보다 편안한 인터페이스와 더 나은 사용자 경험을 제공할 수 있습니다. 현재 대형 화면 모바일 장치가 인기를 누리고 있는 상황에서 이는 일반적인 추세라고 해도 과언이 아닙니다.
점점 더 많은 디자이너가 이 기술을 채택함에 따라 우리는 많은 혁신을 볼 뿐만 아니라 일부 형성 패턴도 볼 수 있습니다.
2. 반응형 레이아웃의 장점과 단점은 무엇인가요?
장점:
해상도가 다른 기기를 대할 때 강력한 유연성
다중 기기 디스플레이 적응 문제를 빠르게 해결할 수 있습니다
단점:
다양한 기기와의 호환, 작업량이 많고 효율성이 낮음
코드가 번거롭고, 숨겨진 쓸모없는 요소가 나타나며, 로딩 시간이 길어집니다
사실 이는 다음과 같은 영향을 받는 절충 디자인 솔루션입니다. 여러 가지 요인으로 인해 최적의 결과가 나오지 않습니다
웹사이트의 원래 레이아웃 구조가 어느 정도 변경되어 사용자에게 혼란을 줄 수 있습니다
3. 반응형 레이아웃은 어떻게 디자인하나요?
1. 서로 다른 기기 간의 호환성 문제를 해결하는 방법은 무엇입니까?
CSS3의 미디어 쿼리를 사용하면 이 문제를 해결할 수 있습니다.
2. 미디어 쿼리로 얻을 수 있는 값은 무엇인가요?
기기 기기 너비, 기기 높이 디스플레이 화면/햅틱 기기의 너비와 높이입니다.
렌더링 창 너비, 높이 표시 화면/촉각 장치의 너비와 높이입니다.
기기를 들고 있는 방향, 가로 또는 세로 방향(세로|가로), 프린터 등
종횡비 도트 매트릭스 프린터 등
기기 종횡비 도트 매트릭스 프린터 등
객체 색상이나 색상 목록 색상, 색상 인덱스가 화면에 표시됩니다.
기기의 해상도
3. 문법 구조와 사용법
구문: @미디어 장치 이름만(선택 조건)(선택 조건) 및(장치 선택 조건), 장치 2 {sRules}
사용법:
a. 예 1: 링크에 @media 사용:
위의 사용에서는 ONLY로 생략되었으며, 첫 번째 조건 Max-Width는 렌더링 인터페이스의 최대 너비를 나타내고 두 번째 조건 MAX-DEVIDE-WIDTH는 장치의 최대 너비를 나타냅니다.
b. 스타일 시트에 @media를 포함합니다.
@media(min-device -너비: 1024px) 및 (최대 너비:989px), 화면 및 (최대 장치 너비:480px),(최대 장치 너비:480px)
및 (방향:가로),(최소 장치- 너비:480px ) 및 (최대 장치 너비:1024px) 및 (방향:세로) {srules}
컴퓨터 모니터 해상도(너비)를 1024px 이상(최대 표시 너비는 989px)으로 설정합니다. 휴대용 장치의 경우 화면 너비가 480px이고 가로로 배치됩니다. 즉, 480 사이즈는 지면과 평행하다) 휴대용 기기
화면 너비가 480px 이상 1024px 미만이고 기기의 CSS 스타일이 세로로 배치됩니다.
4. 반응형 레이아웃 구현