1원 팁 #01 로그인페이지 반응형으로 만들기

@media screen and (min-width: 0px) and (max-width: 400px) {
/* 로그인 */
#mb_login {margin:0 auto;padding:100px 0;width:280px}
#mb_login h1 {margin:0 0 20px;font-size:1.3em}
#mb_login h2 {margin:0}
#mb_login #login_fs {position:relative;margin:0;padding:20px 20px 20px 5px;border:1px solid #cfded8;border-bottom:0;background:#fff}
#mb_login #login_fs legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#mb_login #login_fs label {letter-spacing:-0.1em}
#mb_login #login_fs .login_id {position:absolute;top:26px;left:5px}
#mb_login #login_fs .login_pw {position:absolute;top:52px;left:5px}
#mb_login #login_fs .frm_input {display:block;margin:0 0 5px 80px}
#mb_login #login_fs .btn_submit {position:absolute;top:20px;left:220px;height:49px}
#mb_login #login_info {margin:0px 0 30px;padding:20px;border:1px solid #cfded8;background:#f5f6fa}
#mb_login #login_info div {text-align:center;margin-top:10px;}
}
@media screen and (min-width: 401px) and (max-width: 4000px) {
/* 로그인 */
#mb_login {margin:0 auto;padding:100px 0;width:500px}
#mb_login h1 {margin:0 0 20px;font-size:1.3em}
#mb_login h2 {margin:0}
#mb_login #login_fs {position:relative;margin:0;padding:20px 20px 20px 95px;border:1px solid #cfded8;border-bottom:0;background:#fff}
#mb_login #login_fs legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#mb_login #login_fs label {letter-spacing:-0.1em}
#mb_login #login_fs .login_id {position:absolute;top:26px;left:95px}
#mb_login #login_fs .login_pw {position:absolute;top:52px;left:95px}
#mb_login #login_fs .frm_input {display:block;margin:0 0 5px 80px}
#mb_login #login_fs .btn_submit {position:absolute;top:20px;left:335px;height:49px}
#mb_login #login_info {margin:0 0 30px;padding:20px;border:1px solid #cfded8;background:#f5f6fa}
#mb_login #login_info div {text-align:right}
}

skin/member/basic/style.css /* 로그인 */ 에 교체하시면됩니다 ^^