CSS
(CSS) 반응형 웹 글자 크기 조절 방법
SAFE
2016. 4. 29. 11:26
CSS로 반응형웹을 만드는데 글자도 줄일 수 있는 예제가 들어있는 사이트를 찾아봤습니다.
들어가셔서 소스보기 하면 볼 수 있습니다.
http://s.codepen.io/naradesign/debug/RNGLeQ?
중요한 부분은.. 일부만 떼왔습니다.
@media 부분이 중요한 것 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <head> <style> @media (max-width:360px){html{font-size:10px;}} @media (min-width:361px) and (max-width:399px){html{font-size:11px;}} @media (min-width:400px) and (max-width:439px){html{font-size:12px;}} @media (min-width:440px) and (max-width:479px){html{font-size:13px;}} @media (min-width:480px) and (max-width:519px){html{font-size:14px;}} @media (min-width:520px) and (max-width:559px){html{font-size:15px;}} @media (min-width:560px) and (max-width:599px){html{font-size:16px;}} @media (min-width:600px) and (max-width:639px){html{font-size:17px;}} @media (min-width:640px) and (max-width:679px){html{font-size:18px;}} @media (min-width:680px) and (max-width:719px){html{font-size:19px;}} @media (min-width:720px) and (max-width:759px){html{font-size:20px;}} @media (min-width:760px) and (max-width:799px){html{font-size:21px;}} @media (min-width:800px) and (max-width:839px){html{font-size:22px;}} @media (min-width:840px) and (max-width:879px){html{font-size:23px;}} @media (min-width:880px){html{font-size:24px;}} </style> </head> | cs |