REM

종합 안내: Rem 그리고 Em, 언제 써야 할까

지식iN 웹서비스 rem 적용 사례

10×10 모바일

/* 디바이스 해상도 아니고 웹브라우저 해상도(뷰포트) 기준임 */
html {font-size:10px;} /* iphone5 */
@media (max-width:320px) {html{font-size:10px;}} /* iphone5 */
@media (min-width:360px) and (orientation:portrait) {html{font-size:11.25px;}} /* galaxy3, galaxy note3, galaxy alpha, nexus5, sony xperia, LG G2 */
@media (min-width:375px) and (orientation:portrait) {html{font-size:11.71875px;}} /* iphone6 */
@media (min-width:384px) and (orientation:portrait) {html{font-size:12px;}} /* LG Optimus G, nexus4 */
@media (min-width:412px) and (orientation:portrait) {html{font-size:12.875px;}} /* galaxy note7 */
@media (min-width:414px) and (orientation:portrait) {html{font-size:12.93px;}} /* iphone6+ */
@media (min-width:600px) and (orientation:portrait) {html{font-size:18.8125px;}} /* galaxy tab, nexus7 */
@media (min-width:768px) and (orientation:portrait) {html{font-size:24px;}} /* iPad retina */
@media (min-width:800px) and (orientation:portrait) {html{font-size:25px;}} /* galaxy tab Pro, nexus10 */

/* 가로모드 위치값 정확하게 적용시
@media (min-width:480px) {html{font-size:15px;}} /* iphone4 이하
@media (min-width:568px) {html{font-size:17.75px;}} /* iphone5
@media (min-width:592px) {html{font-size:18.5px;}} /* sony xperia
@media (min-width:598px) {html{font-size:18.6875px;}} /* nexus5, LG G2
@media (min-width:640px) {html{font-size:20px;}} /* iphone5
@media (min-width:667px) {html{font-size:20.84375px;}} /* galaxy3, galaxy note3
@media (min-width:732px) {html{font-size:22.875px;}} /* galaxy7
@media (min-width:736px) {html{font-size:23px;}} /* iphone6+
@media (min-width:962px) {html{font-size:30.0625px;}} /* galaxy tab

CJ몰 모바일

html {
    font-size: 10px;
    font-size: .625rem;
}

@media all and (min-width: 768px){
  html{
    font-size:12px;
    font-size:0.75rem;
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *