Design

페이지에 올린 컨텐트 이미지가 pc/테블릿/모바일 에서 다른 사이즈로 보이게 작업하려면~

추가 페이지를 만들고, 컨텐트 부분에 이미지로 설명을 만들어서 (제품상세정보 같은) 올리게 되면,

 PC 버전에선 이상 없지만 모바일환경에선 해상도에 맞게 축소만 되기 때문에 이미지의 글씨 가독성이 낮게 되네요.

각각 같은 내용을 PC/태블릿/모바일 용으로 만들어서 보이도록 하고 싶습니다.

01. 각각의 이미지의 가로 사이즈

02. 어떻게 페이지에 코드를 작성하여야 하는지;...   도움 부탁드립니다.

 

게시글 공유 URL복사
댓글[1]

열기 닫기

  • 배**영 2016-07-08

    이미지 가로 사이즈는 어떤 사이즈를 말씀하시는건지 상세하게 알려주세요

     

    방법은 여러가지가 있습니다. 공통적으로 이미지를 등록하시고 class를 주신다음 css파일로 제어하시는걸 권장합니다.

    1. 이미지와 텍스트를 분리하는 방법이 있습니다.

    그리고 모바일일때는 텍스트부분을 이미지 아래로 내립니다.

    2. 디자인관리 > 고급디자인관리 > >전체화면 구성에 보시면 css파일이 mobile, tablet, pc용으로 css가 나눠져 있습니다.

    css파일관리에서 각각 제어를 할수가 있습니다.

    이미지를 class로 제어 하는방법이 있습니다.

    mobile용 이미지에 class="mobile"이라고 붙였고

    tablet용 이미지에 class="tablet", pc용 이미지에 class="pc"라고 붙였다면

    mobile.css에서는 .tablet, .pc{display:none;}

    tablet.css에서는 .mobile, .pc{display:none;}     .tablet{display:block;}

    pc.css에서는 .mobile, .tablet{display:none;}     .pc{display:block}

    이런식으로 주시면 됩니다.

     

댓글작성

열기 닫기

댓글작성

top