반응 형 디자인에 EM 및 백분율을 사용하는 방법은 무엇입니까?

Question

마침내 반응 형 디자인을 배우고 있으며 측정 방법 및 백분율 단위에 대한 모범 사례를 알아야합니다. 본문의 font-size을 10px으로 설정하면 모든 글꼴 크기를 선언하는 줄에 문제가 발생합니까 (1em = 10px, 2.5em = 25px 등)?

또한 정확한 시간은 em 단위 대 v 백분율입니까? 주로 인쇄술을위한 단위이고, 그 다음에 크기, 여백, 패딩 등에 백분율이 사용됩니까?

본문 글꼴 크기를 변경하여 미디어 쿼리에 비례하여 글꼴 크기를 조정할 수 있다는 아이디어가 마음에 들지만 텍스트의 크기에 따라 레이아웃과 간격이 바뀌지 않을 것이라고 생각합니다. 나는 그래?).

Answer 1

브라우저의 글꼴 크기 설정이 디자인에 영향을 주도록하는 것이 가장 좋습니다. 즉, font-size을 픽셀 단위로 설정하지 마십시오.

rem 단위는 모든 것이 브라우저 font-size에 비례하도록 보장하기에 좋습니다. em 단위는 상위 요소의 글꼴 크기를 기반으로 계산되므로 요소를 중첩 할 때 사용하기가 더 까다로워 질 수 있습니다. rem은 항상 html 요소 (루트 요소)의 font-size에 상대적입니다. 1rem = 16px라고 가정하고 모든 것을 빌드하면 사용자가 1rem = 20px가되도록 브라우저를 설정하더라도 전체 디자인이 그에 따라 확장됩니다.

반응 형 디자인의 경우 인기있는 장치를 기준으로 임의의 너비가 아닌 내용을 사용할 수 없게되는 화면 너비에서 미디어 쿼리 "중단 점"을 정의하는 것이 가장 좋습니다. 전체 사이트가 브라우저의 글꼴 크기 변경으로 확대 또는 축소 될 때 중단 점도 해당 글꼴 크기를 존중해야합니다. 그러나 Safari는 다른 브라우저와 다르게 rem 미디어 쿼리를 처리하기 때문에 best to use em for media queries입니다.

Answer 2

좋아, 먼저 반응 형 디자인을 사용하고 싶다면 부트 스트랩 또는 폰트와 같은 프레임 워크를 사용하여 반응 형 디자인을 사용하는 것이 좋습니다. 당신은 그런 식으로 초보자처럼 보입니다. 응답 성은 대부분의 복잡한 경우를위한 CSS와 전 처리기입니다.

그러나 질문에 대답하기 위해 대부분의 경우 미디어 쿼리에서 글꼴 크기를 조정하지 않습니다. 당신의 글꼴을 예를 들어 rem으로 설정하십시오. 따라서 많은 장치에서 응답 성을 테스트해야합니다. 레이아웃에서는 div를 반드시 의미해야합니다. 가장 좋은 방법은 viweport vw (너비)와 vh (높이)를 제외하고 비례 요소를 annother 요소 안에 넣는 것입니다. 이 경우 %를 사용하십시오. 렘이 루트보다 낫다. 글꼴의 실제 크기는 html로 다릅니다. 장치에서 화면이 너무 작아지면 메뉴를 축소해야하며 사이트의 텍스트는 div에 있어야합니다. 나는 잠시 동안 계속할 수 있지만, 제가 말했듯이, 프레임 워크를 사용하고, 더 빨리 배우고 빠르게 개발할 수 있습니다. 대부분의 개발자는 고객을 위해 프레임 워크를 사용합니다.