반응형 작업하실때 어떻게들 하시나요?
본문
반응형으로 작업할때 데이터 량이 많은 걸 불러오려 하다보니까 궁금해져서요..
반응형 작업시 모니터에 따라 줄어드는데...
표의 크기가 피씨 테이블을 줄여도 모바일에서 볼때는 너무 좁아서...
깔끔하게 작업하려고 반응형 퍼블리싱 할때 피씨영역 모바일 영역으로 나눌 경우,
사이즈에 맞추어 출력시키려다보면 두번 쿼리해야 하는데...
효율성이 떨어질 듯해서요..
한번만 쿼리해서
피씨 표 그려서 출력고 모바일사이즈에 맟추어 표 그려 출력하고..
이런 방법은 없나요?
답변 3
저는 상황에 따라 다르지만, 표의 내용이 방대하여 디자인요소로 처리하기 힘들면 그냥
table을 감싸고있는 태그에 width 를 고정시키고 가로로 스크롤되도록 처리하구요
반응형적으로 디자인을 할수 있다 싶으면
table태그와 그 자식요소들에 모두 display block 처리를 합니다.
table, tr, td, th {display : block;}
이런식으로요
모두 블락처리를 한후에 디자인합니다.
테이블의 경우가 난감할때가 많쵸~~
전 모바일영역에 진입할때, width 를 강제로 잡아서 overflow-x:scroll 하는 방법을 쓰는 편입니다.
하지만 대부분은 pc/m 일때 display:none/block 이용해서 표 구조를 다시 짭니다 ㅠㅠ
한번만 쿼리 날릴려면.
쿼리 값을 배열로 저장하고 사용하시면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
