반응형웹 스크립트로 바꾸기

· 2016-09-07 (수) 20:05:15 · 4917 · 3
autoSize();

$(window).on('resize', function(){
autoSize();
});

function autoSize(){
var goodsListW = $(".goodsList").outerWidth();
var goodsListW2 = $("#isotope_goods_list2").outerWidth();

if($(window).width() < 450){
$(".list_m_view").show();
$(".list_p_view").hide();
} else {
$(".list_m_view").hide();
$(".list_p_view").show();
}


if($(window).width() < 450){
$(".table_list_top_1").hide();
$(".table_list_top_2").hide();
$(".table_list_top_3").show();

} else if($(window).width() < 1300){

$(".table_list_top_1").hide();
$(".table_list_top_2").show();
$(".table_list_top_3").hide();

} else if($(window).width() < 2500){
$(".table_list_top_1").show();
$(".table_list_top_2").hide();
$(".table_list_top_3").hide();


} else if ($(window).width() >= 2500) {
$(".table_list_top_1").show();
$(".table_list_top_2").hide();
$(".table_list_top_3").hide();
}


if($(window).width() < 450){

var autoWidth = goodsListW / 1;
$(".mLayoutIndex .item a").css("width", autoWidth - 4);

}else if($(window).width() < 1300){

var autoWidth = goodsListW / 3;
$(".mLayoutIndex .item a").css("width", autoWidth - 4);

}else if($(window).width() < 1500){

var autoWidth = goodsListW / 4;
$(".mLayoutIndex .item a").css("width", autoWidth - 4);

} else if ($(window).width() < 2000){

var autoWidth = goodsListW / 5;
$(".mLayoutIndex .item a").css("width", autoWidth - 4);

} else if ($(window).width() < 2500) {

var autoWidth = goodsListW / 6;
$(".mLayoutIndex .item a").css("width", autoWidth - 4);

} else if ($(window).width() >= 2500) {

var autoWidth = goodsListW / 7;
$(".mLayoutIndex .item a").css("width", autoWidth - 4);

}
}


저는 이런식으로 반응형을 만드는게 더 편하더라구요
css가 아직은 많이 익숙치 않아서그런가..^^
|

댓글 3개

미디어 쿼리가 더 간단해 보입니다 ㅡ.ㅜ
2016-09-08 (목) 18:53:02
미디어쿼리가 더 간단하네요
스크립트에 익숙하신 분이면 이쪽이 더 편하실지는 모르겠네요~ ㅎ
미디어쿼리도 어렵지 않으니 조금 익숙해지시면 더 편하게 느끼실거예요^^
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리싱강좌

302건
+
분류 제목 글쓴이 날짜 조회
AngularJS 17-01-02 조회 2,846
AngularJS 16-12-29 조회 2,210
AngularJS 16-12-28 조회 3,277
AngularJS
[AngularJS]
16-12-27 조회 2,836
반응형웹 16-09-07 조회 4,918
반응형웹 16-08-05 조회 8,022
부트스트랩 15-06-21 조회 1.5만
부트스트랩 15-01-16 조회 9,825
표준화 14-05-07 조회 8,862
반응형웹 13-07-11 조회 1.4만
표준화 13-06-19 조회 9,997
표준화 12-12-20 조회 1.7만
반응형웹 12-12-03 조회 2만
반응형웹 12-11-26 조회 3.2만
반응형웹 12-11-23 조회 3.7만
표준화 12-11-22 조회 1.3만
반응형웹 12-11-19 조회 3만
반응형웹 12-11-14 조회 1.2만
반응형웹 12-11-11 조회 3.2만
반응형웹 12-11-06 조회 3만
반응형웹 12-11-03 조회 4만
반응형웹 12-11-02 조회 5.1만
반응형웹 12-11-01 조회 3.3만
표준화 12-10-30 조회 9,587
표준화 12-10-26 조회 1.2만
표준화 12-10-25 조회 9,606
표준화 12-10-24 조회 1.2만
표준화 12-10-17 조회 1.2만
표준화 12-10-10 조회 1.5만
표준화 12-10-09 조회 8,485