반응형 텍스트

해상도에 맞게 조절되는 텍스트

HTML

<h1>welcome to webha.!!!</h1>

<p>해상도에 맞게 제목사이즈가 변합니다.</p>

CSS

h1 {
    text-align: center;
    font-size:95px;
    font-family:"Impact";
    text-transform:uppercase;
    display: block;
}
p {
    text-align:center;
    font-size:12px;
    font-family:"dotum";
}

JavaScript

$(function () {
    var autoFont = function () {
        $("h1").css('font-size', Math.max(Math.min($("h1").width() / (1.1 * 10))));
    }
    autoFont();
    $(window).resize(function () {
        autoFont();
    });
});

/*
 
font-face 접근성을 공부하다가 jquery에  FitText 란 재밌는 플러그인을 발견했습니다
 
참고사이트 : http://fittextjs.com/
 
$("h1").css('font-size', Math.max(Math.min($("h1").width() / (1.1*10))));
 
방식은 간단합니다 넓이가 리사이즈 될때마다 퍼센트로 크기를 맞추는 방법인데요
 
음 1.1 <= 이부분만 수정하시면 원하는 사이즈데로 만드실수있습니다 
 
참고로 모바일화면에선 viewport meta 태그를 쓰게 되면 자동으로 폭이 깔맞춤 됩니다
 
플래시 scale 설정이랑 비슷하네요 
 
예)
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
 
 */