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

국수한사발 2019. 01. 26.

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

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

모바일로 들어가면 컴퓨터로 들어갔을때랑 다른점이 있어 @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