채택완료
상품 전시 카테고리 반응형으로 어떻게 할 수 있나요??
안녕하세요, 완벽한 반응형은 아니더라도 pc 사이즈에서는 한 열에 4 개의 썸네일이 보였다면 아이패드에서는 세 개, 모바일에서는 두 개 이런식으로 설정하고싶습니다.
현재 상태는 이렇게 pc에서는 정상적으로 4개, 하지만 태블릿에서는 3개/1개 따로따로 정렬이 되더라구요.
이런 경우는 어떻게 수정할 수 있을까요??
미디어쿼리 사용해서 width를 수정해도 같은 결과가 나오더라규요
도와주세요!
Copy
<section class="sct_wrap">
<?php
$list = new item_list();
$list->set_category('40', 1);
$list->set_list_mod(4);
$list->set_list_row(6);
$list->set_img_size(200, 300);
$list->set_list_skin(G5_SHOP_SKIN_PATH.'/main.40.skin.php');
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_basic', true);
$list->set_view('it_cust_price', false);
$list->set_view('it_price', true);
$list->set_view('it_icon', false);
$list->set_view('sns', false);
echo $list->run();
?>코드소스입니다.
태블릿에서 따로, 모바일에서 따로 설정해야하나요??
추가로 기기마다 이미지 사이즈를 바꿀 수 있나요??
질문이 많네요,, 미리 감사드립니다 :-)
|
답변 2개 / 댓글 4개
채택된 답변
+20 포인트
.sct_wrap 중 li 를 찾아
@media screen and (max-width: 1440px) {
}
@media screen and (max-width: 1050px) {
}
@media screen and (max-width: 767px) {
}
미디어 스크린을 통해 li width 를 %로 조절하시면 됩니다.
다만 좌우 패딩 마진등은 추가클래스를 통하여 컨트롤하시면되요~
추가로 기기별 이미지사이즈는 일반 웹에서는 굳이 하지않습니다.
미디어 스크린을 통해 작업합니다.
답변에 대한 댓글 4개
해당 리스트 설정에서 4개를 해두셨다면 해당 클래스의 li의 width:25%가 될거구요
해상도에 해당하는 이미지를 맞추려면
@media screen and (max-width: 1050px) {
.클래스 li {width:33.33333333%; float:left; 등 기타 옵션은 맞추어서 등록}
}
@media screen and (max-width: 767px) {
.클래스 li {width:50%; float:left; 등 기타 옵션은 맞추어서 등록}
}
이런식으로 가야죠,, css로 강제로 찍어야 반응형이 됩니다.
해상도에 해당하는 이미지를 맞추려면
@media screen and (max-width: 1050px) {
.클래스 li {width:33.33333333%; float:left; 등 기타 옵션은 맞추어서 등록}
}
@media screen and (max-width: 767px) {
.클래스 li {width:50%; float:left; 등 기타 옵션은 맞추어서 등록}
}
이런식으로 가야죠,, css로 강제로 찍어야 반응형이 됩니다.
답변을 작성하려면 로그인이 필요합니다.