Q. 웹페이지 만들었을때 모바일용은 @media로 하는건가요?

기본 아바타 국수한사발 2019. 01. 26. 조회수 439

안녕하세요 혼자 공부하며 웹페이지 만들면서 공부중인데요

모르는 부분은 인터넷 검색하면서 제가 생각하는 웹페이지를 만들긴 했는데

모바일로 들어가면 컴퓨터로 들어갔을때랑 다른점이 있어 @media를 이용해서 모바일로 봤을때도

제가 원하는 모양이 나오게 수정했었어요

근데 또 모바일로 예쁘게 나오게 하니까 컴퓨터로 윈도우 창을 줄이면 제가 생각한거랑 다르게

나와서 머리가 아프네요 ㅠㅠ

혹시 다른 기기에는 적용 안되고 모바일에만 적용시키는 명령어 같은게 있나요?

(또 제가 섹션의 높이 값보다 $(window).scrollTop() 값이 커지면 section안의 내용물들이 opacity:0에서 1로 바뀌게 만들었는데 컴퓨터로는 잘되는데 모바일에서는 안나타나거나

스크롤이 끝까지 내려가지 않는데 제가 높이 설정 같은걸 잘못해서 그런간가요?)

#웹
공유하고 보상받기 ♥︎
댓글 0

3개의 답변이 있습니다.

큐레이터 채택
박정한 답변자인증
CODE 200/프론트엔드 개발 2019. 01. 27 53%의 채택

그런 문제를 피하기 위해서 보통은 media와 flex를 함께 사용합니다. JS를 함께 사용한다면 innerWidth를 사용할 수 있습니다. 아니면 ua를 확인해서 모바일 기기와 pc를 구별하는 방법도 있지만 추천하지 않습니다. 질문자님같은 문제는 창 크기를 과도하게 줄였거나 줄인 크기가 적절하지 않아서 생긴 문제로 보입니다. 그럴 경우에는 크롬의 Dev Tools에서 모바일 도구를 사용하는걸 추천드립니다. https://developers.google.com/web/tools/chrome-devtools/device-mode/?hl=ko

다만 정확한 결과를 얻기 위해서는 실 기기로 테스트 하시는거 잊지 마세요!

3줄 요약

  1. @media와 flex를 함께 사용하자

  2. innerWidth를 이용한 js 분기도 있으나 추천하지 않는다

  3. 크롬의 Dev Tools, 실제 모바일 기기를 적극 활용하자.

댓글 0
저거슨 답변자인증
BS/개발팀 2019. 01. 26 27%의 채택 
body{background-color:white}

@media (max-width: 850px){
  body {
     background-color:black;
  }
}
@media (max-width: 550px){
  body {
     background-color:red;
  }
}

위와 같이 기본으로 css설정해주시고

위 코드처럼 쓰시면됩니다

댓글 0
봉으니 답변자인증
시스템 2019. 01. 26 20%의 채택

PC나,모바일에서 보는 화면을 각각 다르게 표현하고 싶으신거죠?

간단하게 PC와 모바일을 체크할 수 있는 기준이 있습니다.

-USER-AGENT

javascript 를 통해서 구분할 수 있습니다. 그에 따라서 다른페이지를

이동시키거나 다른 CSS를 적용하여 대응할 수 있습니다.

jquery 를 이용하시니 jquery.broswer 값을 이용해보세요.

-WIDTH

모바일에서의 width는 평균 360px정도로 생각하시면 됩니다.

CSS의 @media 쿼리를 이용해 width에 따른 css를 적용해도 좋습니다.

모바일은 가로모드, 세로모드가 있으니 이점 유념하셔야합니다.

PC에서도 모바일환경의 테스트를 쉽게 할 수 있는 사이트 소개합니다.

http://troy.labs.daum.net/

댓글 0