어떻게 응답 식 레이아웃 을 실현 합 니까?

개인 블 로그 글 링크:http://www.huqj.top/article?id=149
1.응답 식 레이아웃 이 무엇 입 니까?
    응답 식 레이아웃 이란 같은 웹 페이지 를 말 합 니 다.서로 다른 터미널 에 표시 되 는 효과 가 다 르 지만 같은 페이지 를 방문 하 는 것 은 확실 합 니 다.다만 브 라 우 저 는 터미널 에 따라(예 를 들 어 화면 너비,가로 세로 화면,이동 단 또는 pc 단 등)선택 하 는 렌 더 링 방식 도 다 르 기 때 문 입 니 다.여러분 들 이 전단 페이지 를 만 들 때 이런 곤 혹 스 러 움 을 느 낄 것 이 라 고 믿 습 니 다.한 페이지 는 자신의 컴퓨터 에서 잘 보이 고 다른 해상도 가 다른 단말기 에서 방문 하면 전혀 달라 지기 때문에 어 쩔 수 없 이 페이지 요소 의 너 비 를 죽 일 수 밖 에 없습니다.이것 은 해결 방법 이지 만 모 바 일 에 가 져 온 조회 체험 은 매우 좋 지 않 습 니 다.
    백문 이 불 여 일 견 입 니 다.다음은 두 개의 응답 식 레이아웃 의 주 소 를 드 립 니 다.서로 다른 터미널 로 방문 하거나 브 라 우 저의 화면 크기 를 조정 하여 응답 식 을 체험 할 수 있 습 니 다.하 나 는 segment fault 의 사이트 이 고 하 나 는 제 가 쓴 간단 한 demo 입 니 다.(물론 segment 와 비교 할 수 없 지만 나중에 제 가 만 든 이 페이지 로 응답 식 을 어떻게 실현 하 는 지 설명 하 겠 습 니 다.)
    SegmentFault  응답 식 레이아웃 간단 demo
 
2.어떻게 응답 식 구 조 를 실현 합 니까?
    응답 식 레이아웃 이 이렇게 중요 한 이상 어떻게 응답 식 레이아웃 을 실현 합 니까?제 경험 에 따 르 면 쉽게 말 하면 PC 엔 드 스타일 을 만 든 다음 에 css 의@media 미디어 조 회 를 통 해 서로 다른 터미널 에 적합 합 니 다.여기 서 좋 은 습관 은 페이지 를 격자 화 하 는 것 입 니 다.격자 화 는 페이지 를 한 조각 한 구역 으로 나 눈 다음 에 서로 다른 터미널 의 어 울 리 는 것 은 바로 격자 를 다시 배열 하 는 것 입 니 다.이 뒤 에는 인 스 턴 스 로 설명 합 니 다.다음은@media 의 용법 을 살 펴 보 겠 습 니 다.
    아래 의 이 예 를 보 세 요.
1 2 3 4 5 6 7 8 9 body {      background :  white ; }   @media  screen   and ( max-width :  800px ) {      body{          background :  black ;      } }
    이 간단 한 css 스타일 은 바로 미디어 조회 의 가장 간단 한 용법 입 니 다.이 효 과 는 터미널 화면의 너비 가 800 px 보다 클 때 페이지 배경 이 흰색 이 고 800 px 보다 작 을 때 배경 이 검은색 으로 변 하 는 것 입 니 다.물론 이것 은 의미 가 없 지만@media 에 적 힌 스타일 이 라면 조회 조건 이 성립 될 때 정상 적 인 스타일 을 덮어 쓰 고 터미널 에 따라 서로 다른 레이아웃 을 렌 더 링 할 수 있 습 니 다.
    따라서 일반적으로 디자인 응답 식 구 조 는 다음 과 같은 몇 가 지 를 따라 야 한다.
    ① 페이지 요소 의 너 비 는 px 를 단위 로 하지 않 고 백분율 을 사용 합 니 다.
    ② 페이지 프레임 사이 에 스 트림 레이아웃 을 사용 합 니 다.즉,float 속성 을 사용 합 니 다.그러면 요소 가 화면 폭 을 초과 할 때 수평 스크롤 바 가 아 닌 아래로 미 끄 러 집 니 다.
    ③ 그림 의 크기,특히 너비 에 주의 하고 백분율 을 사용 하도록 한다.
 
실례
    다음은 제 가 만 든 간단 한 응답 식 레이아웃 페이지 와 결합 하여 설명 하 겠 습 니 다.효과 도 는 다음 과 같다.
    PC 쪽:
    이동 단:
    먼저 페이지 의 레이아웃 입 니 다.맨 위 에 있 는 div 는 header 입 니 다.로고 와 네 비게 이 션 바 를 포함 하고 아래 는 좌우 두 개의 큰 div 입 니 다.왼쪽 은 main 이 라 고 부 르 고 주요 내용 을 배치 합 니 다.오른쪽 은 right-menu 라 고 부 릅 니 다.사 이 드 바 를 설치 하 는 동시에 right-menu 는 몇 개의 작은 div 도 포함 합 니 다.즉,페이지 에서 보 이 는 각 작은 사 이 드 바 입 니 다.
    그 중에서 main 과 right-menu 는 왼쪽 으로 움 직 여서 두 개의 큰 div 가 같은 줄 로 움 직 일 수 있 습 니 다.일반 css 코드:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 .main {          width :  50% ;          background :  white ;          float :  left ;          margin-left :  11% ;          padding :  1 rem;          font-size :  1 rem;     }           .right-menu {          margin-left :  3% ;          width :  25% ;          float :  left ;     }
    이곳 의 div 너비 와 거 리 는 모두 백분율 로 표시 된다.
    PC 엔 드 의 레이아웃 을 다 쓴 후에 미디어 조회 스타일 을 고려 할 수 있 습 니 다.이 예 를 들 어 다음 과 같은 스타일 로 조정 할 수 있 습 니 다.
    ① 내 비게 이 션 표시 줄 을 숨 기 고 드 롭 다운 메뉴 로 표시 하 며 각 내 비게 이 션 항목 을 한 줄 에 두 지 말고 두 줄 로 나 누 어야 한다.물론 내 비게 이 션 항목 이 많 을 때 몇 줄 을 더 나 눌 수 있다.
    ② 오른쪽 사 이 드 바 는 right-menu 를 main 아래로 조정 하고 실현 방식 은 main 의 변동 속성 을 제거 하 는 동시에 main 과 right-menu 의 폭 을 조정 하 는 것 이다.
    다음은 미디어 조회 스타일 입 니 다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 /* 800px */      @media  screen   and ( max-width :  800px ) {          .header img {              width :  15% ;              height :  15% ;          }          .main {              float :  none ;              width :  95% ;              margin :  0   auto ;              box-sizing: border-box;          }          .right-menu {              padding :  0 ;              float :  none ;              width :  95% ;              margin :  20px   auto ;          }          .main img{              width :  40% ;          }          .menu img {              width :  40% ;          }          .nav-bar .m-menu-toggle {              display :  inline ;          }          .nav-bar ul {              display :  none ;          }     }
    여기 서 나 는 그림 의 너 비 를 조정 하여 한 그림 의 너비 가 차지 하 는 백분율 을 더욱 크게 만 들 었 다.주로 그림 이 너무 작 아서 이동 단 에서 의 조회 체험 이 비교적 나쁘다 는 것 을 고려 했다.
 
    이상 은 간단 한 응답 식 레이아웃 페이지 제작 과정 입 니 다.실 용적 인 Bootstrap 구성 요 소 는 일반적인 응답 식 레이아웃 구 조 를 실현 할 수 있 고 미디어 조 회 를 직접 쓰 지 않 아 도 되 지만 처음부터 한 번 하 는 것 이 이해 에 도움 이 됩 니 다.
    demo 의 접근 주 소 는 위 에 있 습 니 다.원본 코드 를 다운로드 하려 면 여 기 를 클릭 하 십시오.github 주소:github 프로젝트 주소
 
 
[블 로그 참고]
https://www.cnblogs.com/dreamsboy/p/5656009.html
http://www.cnblogs.com/yuanziwen/p/6926561.html 
태그:css,응답 식