반응형 사이트에서 최신글 질문 드립니다.
본문
반응형 사이트를 만드는 중인데요. PC에서 가로로 4개씩 최신글이 보이는데,
모바일로 가면 반응형이라서 세로로 4개가 뿌려지다 보니 스크롤이 너무 길어지네요.
그래서, PC에서는 4개씩, 모바일에서는 2개씩 보여지게 하고 싶으면 어떻게 코딩을 해야 할까요?
미디어 태그 등을 찾아서 살펴봤는데, 구체적인 방법을 모르겠네요.
관련 예시나 소스 등 도움 부탁 드립니다./
감사합니다.
답변 3
최신글 4개 불러오는 쿼리에서
G5_IS_MOBILE 이면 2개만 불러오세요
if(G5_IS_MOBILE){
}else{
}
답변 감사드립니다. 그런데 현재 Mobile=false 로 적용중인데도 가능한가요?
미디어 태그로 가로폭에 따라 최신글 소스를 다르게 (게시물수 부분을 다르게) 하는 방법을 알수 있을까요?
그럼 css에서
@media(max-width:769px){
#id {display:none}
}
오타있을수있음.
원래 반응형이라는것이 디바이스 크기에따라 css조절을통해 보여주는걸 달리하는 정도인데
리스트를 4개에서 2개로 줄이면 페이징도 다시불러와야할것이고 아예 그 글리스트를 다시 불러와야할것인데
그러면 디바이스 크기가 줄어들때마다 감지하는 스크립트를 짜서 일정 크기가 되었을때 ajax로 2개씩만 보이는 리스트로 다시 불러와야할듯하네요
디바이스 크기 감지 스크립트랑 ajax를 응용하셔야겠네요
질문자님의 숙련도가 어느정도인지 몰라 최적화된 답변은 어렵지만
사이트를 제작한다고 하시니 css 정도만 다룰줄 아신다고 가정하에 답변드릴께요.
저라면 일단 모바일 상태에서 해당 최근글 wrap 에
max-height 값을 최근글 2개 정도로 길이로 하고
아래 버튼을 만들어서 더보기 링크로 활용하시는게 좋다고 생각합니다.
물론 모바일에 분기를 두어 내가 원하는 갯수만큼 가져오는방법이 있고
제일 좋은건 ajax 로 무한스크롤이나 이런 부분이 더 효율적이겠지만
질문자님의 스킬이 어느정도인지 모르기에 css 처리만으로 할수있는 답변을 드렸습니다~