이 기사는 반응 형 레이아웃의 개념, 반응 형 레이아웃의 장점 및 단점, 설계 개념 및 특정 구현 코드를 자세히 설명했습니다. 드문 기사입니다. 여기서 우리는 그것을 친구에게 추천합니다 . 1. 반응 형 레이아웃이란 무엇입니까?
반응 형 레이아웃은 2010 년 5 월 Ethan Marcotte가 제안한 개념입니다. 요컨대, 웹 사이트는 각 터미널에 대한 특정 버전을 만드는 대신 여러 터미널과 호환 될 수 있습니다.
이 개념은 모바일 인터넷 탐색을 해결하기 위해 태어났습니다. 반응 형 레이아웃은 다른 터미널의 사용자에게보다 편안한 인터페이스와 더 나은 사용자 경험을 제공 할 수 있습니다. 또한, 대형 스크린 모바일 장치의 현재 대중화로 인해 일반적인 추세로 묘사하는 것은 과장이 아닙니다.
점점 더 많은 디자이너 들이이 기술을 채택함에 따라, 우리는 많은 혁신뿐만 아니라 일부 형성된 모델을 볼 수 있습니다.
2. 반응 레이아웃의 장점과 단점은 무엇입니까? 이점:다른 해상도 장치에 직면 한 강력한 유연성
다중 장치 디스플레이 적응 문제를 빠르게 해결할 수 있습니다
결점:다양한 장비, 높은 워크로드 및 낮은 효율과 호환됩니다
코드는 번거롭고 숨겨진 쓸모없는 요소가 나타나면 로딩 시간이 증가합니다.
실제로 이것은 타협 설계 솔루션으로 여러 요인의 영향으로 인해 최상의 결과를 얻을 수 없습니다.
어느 정도는 웹 사이트의 원래 레이아웃 구조가 변경되고 사용자 혼란이 발생합니다.
3. 반응 형 레이아웃을 설계하는 방법은 무엇입니까?1. 다른 장치 간 호환성 문제를 해결하는 방법은 무엇입니까?
CSS3의 미디어 쿼리는이 문제를 해결할 수 있습니다.
2. 미디어 쿼리는 어떤 값을 얻을 수 있습니까?
장치 width, Device Heigth는 화면/촉각 장치를 표시합니다.
창의 너비와 높이를 렌더링하면 Hegth는 화면/촉각 장치를 표시합니다.
장치의 핸드 헬드 방향, 수평 또는 수직 방향 (초상화 | Lanscape) 및 프린터 등.
스크린 비율 Aspect-Ratio Dot 매트릭스 프린터 등
장치 비율 장치-ASPECT-RATIO-DOT 행렬 프린터 등
객체 색상 또는 색상 목록 색상 색상, 색상 인덱스는 화면을 표시합니다.
장치의 해상도
3. 구문 구조 및 사용
구문 : @Media 장치 이름 만 (선택 조건) NOT (선택 조건) 및 (장치 선택 조건), 장치 2 {SRULES}
용법:
에이. 예 1 : 링크에서 @Media를 사용하십시오.
<link rel = 스타일 시트 유형 = text /css media = 전용 화면 및 (Max-width : 480px), 화면 및 (Max-Device-Width : 480px) href = link.css rel = 외부 nofollow />
위의 사용에서만 생략되어 컴퓨터 모니터로 제한 될 수 있습니다. 최초의 조건 Max width는 렌더링 인터페이스의 최대 너비를 나타냅니다. 두 번째 조건 Max-Device width는 장치의 최대 너비를 나타냅니다.
비. 스타일 시트에 @Media를 포함시킵니다.
코드를 복사하십시오