H5 개발 실천 - 내용 요약

상자 모형 원소의 폭을 계산하는 방식
IE 표준 카트리지 모델 없음

     = width + padding + border
      =      + margin

CSS3에 컴퓨팅 박스 모델의 css 속성 추가box-sizing

box-sizing: content-box | padding-box | border-box;
   ：content-box

박스 모델의 크기 변화로 인해 웹 페이지의 조판 문제를 피하기 위해 일반적으로 스타일 리셋 규칙에서 박스 모델을 border-box로 설정한다

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

설정된 상자의 너비는 다음과 같이 계산됩니다.

      = width

CSS 명명 사양 - BEM 명명 사양
BEM은 구성 요소를 바탕으로 하는 명칭 방식으로 사용자 인터페이스를 독립된 모듈로 나누는 것이 기본 사상이다. 복잡한 사용자 인터페이스라도 개발 과정을 간단하고 빠르게 할 수 있다.또한 코드의 복용성을 어느 정도 높일 수 있으며 순수한 복사와 붙이지 않아도 된다.BEM은 모듈(Block), 요소(Element), 수식자(Modifier)를 뜻하는데, 이런 명명 방식을 사용하면 CSS의 클래스 이름을 실제적인 의미가 있고 자기 해석이 가능하며 더욱 높은 개발 우호성을 가지게 할 수 있다.《대공장 H5 개발 실전 수첩》
스타일을 쓸 때 CSS의 예처리 언어를 조합하면 css 스타일의 쓰기를 간소화할 수 있습니다.

//     SCSS   
.search-bar {
  &__input { ... }
  &__button { ... }
}

ClassName의 명칭은 가능한 한 짧고 명확하게 영문 단어로 명명하고 모든 자모가 소문자로 되어 의미가 불분명한 줄임말 단어 사이에 밑줄을 통일적으로 사용하지 않도록 해야 한다또는 - 학습 BEM의 사상을 연결하고 성명명법규범으로 스타일 모듈을 정의하여 코드의 복용성을 높인다
응답 페이지 개발
우리는 rem 단위를 결합시켜 페이지의 레이아웃을 실현할 수 있다.신축성 레이아웃의 핵심은 창 크기 변화에 따라 루트 요소의 글씨체 크기를 동태적으로 바꾸는 데 있다. 그러면 우리는 다음과 같은 절차를 통해 최적화할 수 있다. 루트 요소의 글씨체 크기에 창 크기에 따라 변화하는 vw 단위를 설정하면 그 크기를 동태적으로 바꾸는 다른 요소의 텍스트 크기 크기, 레이아웃 높이, 간격,여백은 모두rem 단위를 사용합니다.루트 요소의 글꼴 크기의 최대 최소값을 제한하고 바디에 최대 너비와 최소 너비를 더하여 레이아웃 너비의 최대 최소 제한을 실현한다.《대공장 H5 개발 실전 수첩》

// rem     ：   75px       ，750px-75px、640-64px、1080px-108px，    
$vw_fontsize: 75; // iPhone 6           
@function rem($px) {
     @return ($px / $vw_fontsize ) * 1rem;
}
//         vw   
$vw_design: 750;
html {
    font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
    //   ，  Media Queries           
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px;
    }
}
// body            ，    100%    block      body      
body {
    max-width: 540px;
    min-width: 320px;
}