귀하의 의뢰인이이 문제를 지적 할 권한이 있다고 생각합니다. 일반적으로 사람이 브라우저 글꼴 크기를 "정상"임계 값 이상으로 설정하게되는 이유는 시력이 좋지 않기 때문입니다. 그런 이유로 20/20 비전을 가질만큼 운이 좋지 않은 사람들을 수용하는 것은 좋은 습관 일뿐만 아니라 예의 범절입니다.
em 크기와 min-widths을 사용하여 문제를 해결했습니다. 이것은 픽셀 완벽한 레이아웃을 생성하지는 못하지만 완벽한 상대 레이아웃을 생성합니다. 모든 레이아웃은 폰트 크기의 크기에 관계없이 똑같은 비율을 갖습니다.
em을 사용할 때 버튼과 같은 항목의 크기를 계산하는 것이 훨씬 쉽습니다.
다음은 어떻게 사용하나요?
body {
// Allow the font size to be as big as the browser wants.
font-size: 100%;
}
.main-container {
// allow you body container to stretch as big as it needs
// You could also specify this in em's
min-width: 960px;
}
.button {
// want some bigger text, that's fine
font-size: 1.2em;
// the rest of button is now normalised so 1em is actually 1.2em
// set the width by counting the characters in the button text
// remember to take any padding on the button into account
// in the width
width: 10em;
padding: 1em;
}
그것은 em 사용하여 완벽한 픽셀에 가까이 꽤 쉽게의 0.3em '의 단지 일반 브라우저의 글꼴 크기는 것을 기억하려고들 주위 16px 그래서 5px 그렇게 em에서 약 1/3 16이다'.
다른 말로하면 크기를 계산하는 지침이나 일반적인 규칙입니다.
0.3em = 5px
당신에 대한 em 년대를 기억해야하는 것은 그들이 부모 컨테이너에서 상속한다는 것입니다.
.my-content {
font-size: 1.2em;
}
.my-content .my-paragraph {
font-size: 1em;
// this is actually 1.2em because it inherits and normalises
// from it's parent
}
my.content .my-paragraph .my-span {
font-size: 1.2em;
// is 1.2 + 20%
}
이렇게 계속 연결됩니다. 따라서 규칙은 요소의 글꼴 크기를 직접 지정하여 부모가 아닌 스타일을 지정하는 것입니다.
귀하의 사이트에 대한 큰 점은 이제 어떤 크기로든 완벽하게 형성된다는 것입니다. 모바일 장치, 태블릿, 고해상도 모니터, 50 인치 평면 스크린 또는 50 피트 정보 디스플레이의 과다에서 위대하게 될 것입니다.
그리고 시력이 좋지 않은 사람들은 모두 사이트에서 귀하의 노력과 열심히 일하는 것을 도울 수있었습니다.
사이트에 대한 링크를 공유 할 수 있습니까? – Michelle
예 http://lionfront.com/Anzalone. 해당 페이지는 "Who We Are"하위 메뉴의 팀 페이지입니다. –