반응 형 디자인 부트 스트랩
간략한 소개
이 튜토리얼은 어떻게 반응 형 디자인을 페이지 레이아웃을 사용하는 방법을 보여줍니다. 과정에서, 당신은 반응 형 웹 디자인을 배울 것입니다. 모바일 기기의 인기와 함께, 어떻게 사용자가 이미 피할 수없는 문제이다, 좋은 시각 효과를 얻을 수 있도록 사이트에 모바일 장치를 통해 검색 할 수 있습니다. 반응 형 웹 디자인은 이러한 목적을 달성하기위한 효과적인 방법이다.
반응 형 웹 디자인은 무엇인가
반응 형 웹 디자인은 사용자가 사이트에게 좋은 시각적 효과를 검색 할 장치의 다양한 크기에 액세스 할 수 있도록하는 것입니다. 예를 들어, 웹 사이트를 방문하여 스마트 폰에 찾아 컴퓨터 모니터에 사이트 나타내는, 스마트 폰의 화면 크기는 컴퓨터 모니터보다 훨씬 작은, 그러나 당신은 사용자 경험의 차이가 거의 동일하다고 생각하지 않았다 응답 디자인에 좋은 일을한다.
우리는 우리가 유체 레이아웃 예제 의 응용 프로그램 응답 성능을 , 다른 화면 크기에 찾아 여러분을 초대합니다. 당신이 사용할 수있는 크롬 이나 파이어 폭스를 브라우저 창 크기를 조정 확장을 조정합니다.
당신이 볼 수 있습니다, 여기를 클릭 부트 스트랩 반응 형 디자인 예제를 .
반응 형 웹 디자인 작품
적용하려면 반응 형 웹 디자인하면 스타일 포함 CSS의 크기에 적응하도록 다양한 장치를 만들어야한다. 페이지가 특정 장치에 장착되면, 장치의 표시 영역의 크기의 첫 번째 테스트 될 것 같은 미디어 쿼리 (미디어 쿼리)이 시간과 페이지 및 웹 개발 기술에 대한 다양한 폰트를 사용하고 스타일 장치 고유는로드한다.
반응 형 웹 디자인 CSS의 깊이 연구
"반응 형 디자인을"학습하는 방법을 배우는 우리 것 '부트 스트랩-responsive.css'는 뉘앙스를 달성하는 것입니다. 이에 앞서, 당신은 페이지의 헤더 영역에 다음 코드 줄을 추가해야합니다 :
<메타 이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1.0">
뷰포트 메타 태그는 기본 뷰포트를 무시하고 특정 스타일을 연관 뷰포트를로드 도움이됩니다.
화면의 폭과 너비 속성입니다. 또한, 예컨대 (320), 값이 들어 320 픽셀, 또는 원래의 해상도를 사용하는 브라우저에게 사용 '장치 폭'의 값을 나타낸다.
초기 스케일 속성 초기 뷰포트의 비율이다. 1.0로 설정하면, 장치는 원래 폭을 보여줍니다.
다음과 같이 물론, 부트 스트랩 응답 CSS를 추가해야합니다 :
<링크 HREF = "자산 / CSS / 부트 스트랩 - responsive.css"확인해 = "스타일 시트">
당신이 응답 CSS 파일을 찾을 경우 지금, 당신은 시작 지역 '@media'의 다양한, 다시 (줄 번호 10-22)에서 일부 공공 제표 것을 발견 할 것이다. 이것은 다양한 장치에 적합한 양식을 작성하는 방법이다.
첫 번째 영역에 '@media (MAX-폭 : 480 픽셀 )' 480 픽셀 스타일 장치 설정의 최대 폭으로했다.
제 2 영역에 '@media (최대 폭은 : 767px )' 767 화소 스타일 장치 설정의 최대 폭으로했다.
세 번째 영역 '@media (최소 폭 : 768px ) 및 (최대 폭 : 979px)'768 픽셀의 최소 폭과 979 픽셀 스타일의 장치 설정의 최대 폭으로 시작했다.
다음 영역은 장치 설정 스타일 979 픽셀의 최대 폭이다. : 그래서 '@media (979px 최대 폭이다 )' 시작은.
마지막 두 지역에 각각 '@media (최소 폭 : 980 픽셀 )' 와 '@media (최소 폭 x 1200 픽셀 )' 장치가 스타일 980 픽셀의 최소 폭으로 설정하기 전에 시작, 후자는 가장 작은 폭은 장치 1200 픽셀의 스타일을 설정합니다.
따라서,이 스타일의 기본적인 역할은 최대폭 및 장치의 최소 폭에 따라 사용되는 스타일을 결정하기 위해 '최소 폭'과 '최대 폭'속성을 사용하는 것이다.
설명
레이아웃이 더 반응하기 위해서는, 부트 스트랩은 세 가지를 수행합니다
1. 그리드의 열 너비를 수정합니다.
2.만큼 필요가 있기 때문에, 오히려 소자 부동보다 스택의 요소를 사용한다. 당신이 스택의 요소가 뭔지 모르는 경우, w3.org에서 다음과 같은 형태의 도움을 제공 할 수있다 :
루트 요소 (HTML)이 스택 루트 콘텍스트를 형성하는 다른 적층 콘텍스트 생성 임의의 소자 배치하여 (상대적 위치 결정 요소를 포함 대신 '자동차'의 값을 산출 'Z 인덱스'있다). 블록에 컨텍스트 스택 상대가 필요하지 포함되어 있습니다.
3. 제대로 크기의 제목과 텍스트를 렌더링합니다.
모바일 기기 친화적 인 레이아웃 빠른 개발
부트 스트랩 클래스는 모바일 용 레이아웃의 개발에 유용한 여러 가지가 있습니다. 이러한 클래스에 'responsive.less'에서 볼 수 있습니다.
기본값 바탕 화면에서 숨겨진 .visible 전화,보기에서 숨겨진 979px 768px에 태블릿의 휴대 전화에 767px의 폭과 보이지,.
.visible 태블릿, 767px의 숨겨진 휴대 전화 아래의 폭은 979px 접시에 볼 수 768px에 바탕 화면에 표시되지는 기본값 인, 숨길, 표시되지 않습니다.
767px의 폭과 전화 아래에 숨겨진 .visible 데스크탑은 기본입니다 바탕 화면에 표시 보이지 않는 979px 768px에 태블릿에 숨겨진, 표시되지 않습니다.
.hidden - 전화, 767px의 폭과 다음 전화에 숨이에 표시되지 않습니다 979px 태블릿 볼 수, 기본값 바탕 화면에 표시 768px합니다.
979px로 768px 태블릿에 .hidden 태블릿, 휴대 전화에 767px의 폭과 보이지는 기본입니다 바탕 화면에 표시, 눈에 보이지 않는 숨겨진.
.hidden 데스크탑, 767px의 폭에 기본입니다 바탕 화면에서 숨겨진 볼 수 979px 768px에 태블릿에 휴대 전화의 가시성 아래.