응답 식 웹 의 배경 과 개념 을 소개 한 후에 구체 적 인 실현 방법 을 소개 할 때 가 되 었 다.사실은 응답 식 웹 디자인 의 방법 은 매우 간단 하 다.바로 CSS 3 의 미디어 조회 Media Queries 와 Viewport 를 이용 하여 문 제 를 해결 하 는 것 이다.
우선 미디어 Queries 를 살 펴 보 겠 습 니 다.여기 서 저 는 간단 한 열거 만 할 것 입 니 다.흥미 가 깊 은 학생 은 참고 할 수 있다.http://www.w3.org/html/ig/zh/wiki/CSS3%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2）
미디어 조회 설정 을 통 해 우 리 는 화면 너비,화면 방향 등 각 속성 에 따라 서로 다른 장면 에서 서로 다른 CSS 파일 을 불 러 와 페이지 의 시각 적 스타일 을 렌 더 링 할 수 있 습 니 다.구체 적 인 사용 방법 은 다음 과 같은 두 가지 가 있다.
링크 탭:<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />
예제 코드 는 현재 화면 너비 가 479 px 보다 작 을 때 testcssby width 1.css 파일 을 불 러 와 페이지 를 렌 더 링 하 는 것 을 의미 합 니 다. CSS 에서 직접 설정:@media screen and (max-width:479px) {
/* CSS */
}
Media Queries 의 일부 상용 속성 에 대해 서 는 자주 사용 하 는 몇 가지 만 간단하게 설명 하고 다른 속성 은 여러분 이 직접 관련 자 료 를 찾 아 보 세 요.
width:터미널 장치 디 스 플레이 영역의 폭 을 설명 하고 max/min 접 두 사 를 받 습 니 다. height:터미널 장치 디 스 플레이 영역 높이 를 설명 하고 max/min 접 두 사 를 받 습 니 다. device-width:터미널 장치 화면의 폭 을 설명 하고 max/min 접 두 사 를 받 습 니 다. device-height:터미널 장치 화면의 높이 를 설명 하고 max/min 의 접 두 사 를 받 습 니 다. orientation:터미널 장치 가 가로 화면 에 있 는 지 세로 화면 에 있 는 지 설명 하고 값 은 각각 landscape/portrait 입 니 다. 브 라 우 저 크기 를 조정 할 때 위 에서 미디어 를 통 해 속성 을 조회 하 는 작업 을 하면 응답 식 웹 디자인 을 완성 할 수 있 습 니 다.그러나 이것 은 모 바 일 단말기 의 브 라 우 저 를 만족 시 킬 수 없습니다.모 바 일 브 라 우 저 기본 페이지 는 넓 은 화면 으로 디자인 되 기 때문에 그 를 줄 여 작은 화면 에 적응 할 수 있 지만 단말기 장 치 는 정확 한 폭 을 식별 할 수 없습니다.그래서 미디어 조회 만 으로 는 모 바 일 단말기 의 응답 식 웹 디자인 을 해결 할 수 없다.이 럴 때 view port 의 meta 라벨 을 사용 하여 일련의 설정 을 해 야 합 니 다.마찬가지 로 다음 에 저 는 간단 한 열거 설명 만 드 리 겠 습 니 다.관심 이 있 는 학생 들 은 인터넷 자 료 를 참고 하여 깊이 있 는 연 구 를 할 수 있 습 니 다.
정상적으로 우 리 는 응답 식 웹 디자인 의 페이지 가 필요 합 니 다.페이지 에 view port 의 설정 을 추가 해 야 합 니 다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">
width=device-width:viewport 의 폭 을 제어 하고 고정된 값 이나 특수 한 값 을 지정 할 수 있 습 니 다.예 를 들 어 device-width(장치 너비).그러나 이 설정 은 세로 화면 상태 에서 만 유효 하기 때문에 가로 화면 상태 에서 돌아 오 는 것 은 세로 화면 상태 와 같은 너비 입 니 다. initial-scale=1.0:브 라 우 저 에 게 페이지 를 초기 화 할 때 페이지 를 크기 조정 하지 말 라 고 알려 줍 니 다.maximum-scale=1.0:브 라 우 저 에 게 페이지 확 대 를 막 으 라 고 말 하지만 이렇게 되면 사용자 가 수 동 으로 페이지 를 확대 하거나 축소 하 는 것 도 금지 되 어 있 습 니 다.뭐 랄 까,아름 다운 것 도 결함 이 있 을 수 있 습 니 다. minimum-scale=1.0:브 라 우 저 에 게 페이지 의 축 소 를 막 고 위의 문 제 를 가 져 오 라 고 알려 줍 니 다. user-scalable=no:브 라 우 저 에 페이지 크기 조정 을 금지 하 라 고 알려 줍 니 다. target-densitydpi=device-dpi:해상도 설정 은 보통 값 을 추출 할 수 있 습 니 다.device-dpi(장치 자체 의 dpi 를 목표 dp 로 사용 하여 크기 조정 이 발생 하지 않 습 니 다),high-dpi(고해상도 사용,중 저 해상도 장면 에서 상응 하 게 축소 합 니 다),medium-dpi(중간 해상도,고저 해상도 로 각각 해당 하 는 확대 와 축소,결 성 값),low-dpi(낮은 해상 도 를 사용 하고 높 은 해상 도 를 상응 하 게 확대 합 니 다). viewport 에 대한 설정 을 통 해 Media Queries 의 속성 설정 을 이용 하면 응답 식 웹 페이지 를 만 들 수 있 습 니 다.다음은 응답 식 웹 디자인 이 어떻게 시작 되 었 는 지 한 걸음 한 걸음 알려 드 리 겠 습 니 다.
웹 페이지 너비 자동 조정 허용: 웹 페이지 에 view port meta 의 정 의 를 추가 하 는 것 입 니 다.
하나의 기준 을 선택 하여 구체 적 인 페이지 를 개발 했다. 예 를 들 어 한 페이지 가 화면 너비 가 320 px,480 px,640 px 인 세 가지 장면 에서 응답 식 디자인 을 하도록 요 구 받 았 을 때 320 px 의 기준 을 선택 하여 먼저 페이지 개발 을 한다.
추출 최저 기준 에서 의 CSS 스타일 은 외부 체인 스타일 파일 로 독립 되 었 습 니 다: 320 px 의 CSS 스타일 을 모두 외부 체인 스타일 파일 로 추출 하고 응답 식 디자인 의 페이지 HTML 코드 에는 CSS 가 정의 하 는 코드 가 없습니다.
UEDMms 의 시각 원고 에 따라 다른 표준 의 CSS 스타일 파일 개발 을 진행한다. 미디어 Queries 속성 설정 을 통 해 서로 다른 장면 에서 서로 다른 CSS 스타일 파일 을 불 러 오 는 것 을 정의 합 니 다. 상기 몇 단 계 를 통과 한 후에 OK,당신 의 첫 번 째 응답 식 웹 디자인 페이지 가 정식 적 으로 완성 되 었 습 니 다.그러면 다음 에 테스트 를 시작 하 겠 습 니 다.물론 모든 단말 장치 로 테스트 할 수 있 습 니 다.물론 이것 은 필요 하지만 바로 응답 식 디자인 의 효 과 를 볼 수 있 도록 합 니 다.도구 하나 추천 합 니 다(http://dfcb.github.io/Responsivator/)여기 있 습 니 다.해 보 세 요.쾌감 을 느 낄 겁 니 다.
왜 지금 이렇게 많은 사이트 들 이 응답 식 웹 디자인 을 선택 합 니까?주요 우세 한 개인 감각 은 다음 과 같은 몇 가지 가 있다.
사용자 에 게 더욱 좋 은 시각 적 표현: 서로 다른 화면 아래 페이지 의 표현 방식 이 다 르 기 때문에 서로 다른 단말기 의 사용자 에 게 서로 다른 시각 적 체험 을 할 수 있다.
개발 원가 절감: 응답 식 웹 디자인 은 맞 춤 형 개발 이나 앱 개발 에 비해 개발 자원 투입,개발 작업 시간 등 여러 측면 에서 많은 것 을 절약 했다.바로 시간 을 절약 하고 돈 을 절약 하 는 것 이다.왜 기꺼이 하지 않 겠 는가?
입 구 는 하나 밖 에 없다. 당신 이 어떤 단말기 로 웹 페이지 를 방문 하 든 URL 은 하나 입 니 다.
