一, 부트 스트랩
부트 스트랩의 공식 웹 사이트 : www.bootcss.com
1. 응답 레이아웃
반응 형 웹 페이지 응답 / 적응 페이지
브라우저에 따라 할 수있는 장치 (PC, 패드, 전화)
자동으로 사용자 경험을 저하하지 않도록, 해당 레이아웃, 이미지, 텍스트 효과를 호출합니다.
2. 반응 형 웹 페이지는 전제에서 수행해야합니다
1. 레이아웃 : 고정되지 않은 폭, 레이아웃 흘러야 (위치만큼 작은 플로트 수)
컨테이너의 크기 변경 EM REM 수면의 크기 2. 텍스트와 그림,
3. 미디어 문의 기술
문제는 응답 페이지를 존재합니다
-
-
- 페이지의 복잡성이 크게 증가
- 내용이 몇 페이지에서만 사용할 수 있습니다 (회사의 공식 웹 사이트, 포털)
- 미디어 문의 기술은 H5 / C3 기술입니다
-
그것에 대해 미디어 쿼리에 부트 패키지는, 우리 자신을 작성할 필요가 없습니다
응답 페이지를 테스트하는 방법 (3)
1. 실제 장치 테스트를 사용하여
- 장점 : 진실하고 신뢰할 수있는
- 단점 : 테스트 작업의 엄청난 양의
2. 시험에 사용하는 타사 시뮬레이션 소프트웨어
- 장점 : 너무 많은 실제 장비를 추가 할 필요없이 테스트를 용이하게하기
- 단점 : 제한된 테스트 결과, 더 검증 출원
3. 시뮬레이터 테스트와 함께 제공되는 브라우저를 사용하여
- 장점 : 쉬운
- 단점 : 제한된 테스트 결과, 더 검증 출원
4. 어떻게 응답 레이아웃에 쓰기
1. 뷰포트 --- 메타 태그의 뷰포트를 정의
= "뷰포트"이름을
웹 페이지의 내용이 허용하는 작업을 할 수 제공
폭 = 장치 폭은 장치의 폭은 상기 표시 영역의 폭을 나타낸다
초기 스케일 여부 = 1.0 1.0 확장되지 않을 크게 표시 영역 폭을 나타낸다
최대 규모 = 1.0 최대 줌 배율 허용
사용자 확장 성 0 = 사용자가 수동으로 예 / 아니오 / 1/0의 크기를 조절하지 할 수 있는지 여부
일반 설정 :
<메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1">
2. 모든 콘텐츠 / 텍스트 / 이미지의 상대적인 크기는,이 절대 값을 사용하지 10px.
쿼리 레이아웃 기술에 대한 응답으로 미디어 3. 유연한 유체 레이아웃 + 레이아웃은 완료
플렉스 떠
4. 기술은 CSS3 미디어 쿼리 응답 웹 사이트를 수행하는
Media:媒体，只浏览网页的设备。如：screen(pc/pad/phone) tv print
Media Query:媒体查询，可以自动根据当前浏览器设备的不同(尺寸，解析度，方向不同)，
有选择指定一部分CSS而忽略其他部分的CSS.
根据媒体查询的结果，执行同一个css文件下的不同代码块。
@media screen and (min-width:768px) and (max-width:991px){
选择器{样式}
}