반응 형 디자인 단위

Question

저는 Foundation 3.0 UI 프레임 워크를 사용하여 대형 웹 응용 프로그램을 만들었으며 px 기반 레이아웃과 글꼴 ​​크기가 있습니다.

"em"기반 글꼴 크기/행 높이 및 패딩/여백이 있습니다. 나는 스마트 폰을위한 반응 형 레이아웃을 위해 "em"기반 글꼴 크기와 패딩을 선택하는 것이 좋은 선택인지 알고 싶습니다.

Answer 1

응답 디자인의 측면에서 em의 주된 이점은 다양한 화면 크기의 글꼴 크기를 쉽게 변경할 수 있다는 것입니다.

예. 큰 화면과 작은 화면 (예 : 휴대 전화 및 TV)에 대해 미디어 쿼리를 사용하는 경우 두 가지 모두의 글꼴 크기를 변경하려고합니다.

당신이 모든 em의에서 크기를 한 경우는 단순히과 같이 몸에 font-size을 변경할 수 있습니다 : 당신이 px에있는 모든 크기를 가진 것처럼

/* For TV's (or other large screens */ 
    @media screen and (min-width: 1800px) { 
     body { font-size: 1.4em; } 
    } 

    /* For mobiles */ 
    @media screen and (max-width: 400px) { 
     body { font-size: 0.9em; } 
    } 

가 어디서 많이해야 할 것 글꼴 크기를 조정하는 작업이 늘어납니다.

편집 : 나는 그것을 이해 (위 그림 참조) 당신은 또한 여백의 크기를 조정할 수 있습니다 몸의 글꼴 크기를 크기를 조정하는 경우 또한, 응답 성 레이아웃에 대한 좋은 생각이있을 수 있습니다 여백 + 패딩을 em를 사용 + 패딩 (padding) (크기를 작게 또는 크게) 또한 반응 형 디자인에 매우 유용 할 수 있습니다.

Answer 2

절대 값이 px 달리, em을 대상으로 할 경우 매우 중요하다가되는 볼 것 해상도에 따라 확장 할 수 있기 때문에 예, px을 통해 그들과 %를 사용하여, 반응 디자인 웹 사이트/애플리케이션에 확실히 낫다 스마트 폰, 태블릿 등.