반응형을 위한 기준 정리

홍구
홍구
May 17, 2017 · 12 min read

윈도우 폭

.col-xxs-1,.col-xxs-10,.col-xxs-11,.col-xxs-12,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9{min-height:1px;padding-left:15px;padding-right:15px;position:relative}.visible-xxs,.visible-xxs-block,.visible-xxs-inline,.visible-xxs-inline-block{display:none!important}@media (max-width:480px){.col-xxs-1,.col-xxs-10,.col-xxs-11,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9{float:left}.col-xxs-1{width:8.333333333333332%}.col-xxs-2{width:16.666666666666664%}.col-xxs-3{width:25%}.col-xxs-4{width:33.33333333333333%}.col-xxs-5{width:41.66666666666667%}.col-xxs-6{width:50%}.col-xxs-7{width:58.333333333333336%}.col-xxs-8{width:66.66666666666666%}.col-xxs-9{width:75%}.col-xxs-10{width:83.33333333333334%}.col-xxs-11{width:91.66666666666666%}.col-xxs-12{width:100%}.col-xxs-push-1{left:8.333333333333332%}.col-xxs-push-2{left:16.666666666666664%}.col-xxs-push-3{left:25%}.col-xss-push-4{left:33.33333333333333%}.col-xxs-push-5{left:41.66666666666667%}.col-xxs-push-6{left:50%}.col-xxs-push-7{left:58.333333333333336%}.col-xxs-push-8{left:66.66666666666666%}.col-xxs-push-9{left:75%}.col-xxs-push-10{left:83.33333333333334%}.col-xxs-push-11{left:91.66666666666666%}.col-xxs-pull-1{right:8.333333333333332%}.col-xxs-pull-2{right:16.666666666666664%}.col-xxs-pull-3{right:25%}.col-xxs-pull-4{right:33.33333333333333%}.col-xxs-pull-5{right:41.66666666666667%}.col-xxs-pull-6{right:50%}.col-xxs-pull-7{right:58.333333333333336%}.col-xxs-pull-8{right:66.66666666666666%}.col-xxs-pull-9{right:75%}.col-xxs-pull-10{right:83.33333333333334%}.col-xxs-pull-11{right:91.66666666666666%}.col-xxs-offset-1{margin-left:8.333333333333332%}.col-xxs-offset-2{margin-left:16.666666666666664%}.col-xxs-offset-3{margin-left:25%}.col-xxs-offset-4{margin-left:33.33333333333333%}.col-xxs-offset-5{margin-left:41.66666666666667%}.col-xxs-offset-6{margin-left:50%}.col-xxs-offset-7{margin-left:58.333333333333336%}.col-xxs-offset-8{margin-left:66.66666666666666%}.col-xxs-offset-9{margin-left:75%}.col-xxs-offset-10{margin-left:83.33333333333334%}.col-xxs-offset-11{margin-left:91.66666666666666%}.visible-xxs{display:block!important}table.visible-xxs{display:table}tr.visible-xxs{display:table-row!important}td.visible-xxs,th.visible-xxs{display:table-cell!important}.visible-xxs-block{display:block!important}.visible-xxs-inline{display:inline!important}.visible-xxs-inline-block{display:inline-block!important}.hidden-xxs{display:none!important}}

윈도우 비율

@media screen and (max-aspect-ratio: 1/1) {
/* 높이가 폭보다 더 길때에만 해당된다. */
}

터치기준

html.touch {
...
}
html.no-touch {
...
}
이렇게 생긴 요소입니다.

html.no-touch .dropdown:hover .dropdown-menu {
top: 0;
display: block;
margin-top: 0;
}
a.btn, a.list-group-item {
padding: 8px 12px;
}
html.no-touch a.btn, html.no-touch a.list-group-item {
padding: 12px 12px;
}

디바이스 넓이

const isPhone = window.screen.width * window.screen.height < 500000;
html.is-phone {
...
}

디바이스 종류

const isAndroid = /android/i.test(navigator.userAgent);
const isIos = /ipad|iphone|ipod/i.test(navigator.userAgent);
html.is-android {
...
}
html.is-ios {
...
}

Overriding

마무리

홍구

Written by

홍구

tyle.io(Co-CEO), whooing.com(CEO)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade