2012-11-01 3 views
4

미디어 쿼리를 사용하여 모바일 장치 용 사이트를 변경하는 것이 오버 헤드가 적고 전화 속도가 느리기 때문에 좋다고 읽었습니다. 그러나 그것이 어떻게 도움이됩니까? 아무 것도 할 수 없지만 모바일 장치에 표시하지 않으려는 요소를 숨길 수 있습니까? 여전히 숨겨진 요소를 다운로드해야합니다. 그래서 이득은 무엇입니까? 나는 꽤 혼란 스럽다.미디어 쿼리를 통해 모바일 사용자의 사이트 성능이 향상되는 방법

+0

CSS 배경 이미지의 버전이 변경되어 대역폭이 약간 줄어들 수 있습니다. 하지만 동의합니다. 이것은 "성능"보다 사용성에 관한 것입니다. –

+0

미디어 쿼리를 사용하여 해상도가 다른 여러 장치를 수용하기 위해 사이트의 모양을 변경했습니다. 실제로 숨기기 만하는 것이 아니라 사용자 환경을 개선하는 것입니다. 다른 레이아웃/콘텐츠를 통해 –

답변

1

전체 아이디어는/적응 형 웹 사이트 디자인은 웹 페이지의 크기를 만들기에 너무 많은 아니거나 자산이 작다 ... 모바일 장치에서 웹 사이트를 보는 사람들에게 콘텐츠를 액세스하고 읽을 수있게 만드는 것입니다. 나는 누군가가 모바일 장치에 있기 때문에 요소를 숨기지 않는다고 말하면서 디자인을 말하고 적절하게 개발하여 모바일 및 태블릿 장치에서 콘텐츠를 더 잘 표현할 수있게합니다.

귀하의 이득 진술서 당; 데스크톱 사용자뿐 아니라 모바일 및 태블릿 사용자에게도 적합한 웹 사이트 디자인 및 개발에서 얻게되는 이득입니다. 더 많은 사람들이 떠나기 쉽고 머물러 있고 콘텐츠를 확인하기 쉽습니다.

당신은 아래의 응답 웹 사이트 디자인에 최대 자세한 내용을보실 수 있습니다 :

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

http://www.techrepublic.com/blog/webmaster/how-to-get-started-with-responsive-web-design/1769

http://www.alistapart.com/articles/responsive-web-design/

는 또한 아래에 응답 웹 사이트 디자인의 이점에 대한 자세한 내용을보실 수 있습니다 :

http://www.loungelizard.com/web-design-blogs/design/the-benefits-of-responsive-web-design/

http://www.seomoz.org/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers

빠른 참고 : 미디어 쿼리가 응답/적응 형 웹 사이트 디자인과 손을 이동합니다.

희망이 도움이되었습니다!

+1

이러한 링크를 이용해 주셔서 대단히 감사드립니다. 나는 그것들을 지금까지만 훑어 보았다. (그러나, 그들 중 하나만이 모바일 반응 웹 사이트를 가지고 있으며, 심지어 아이폰이나 데스크톱 이건간에 동일한 이미지가 여전히 제공된다.그러나 나는 그들에게 모두 철저한 읽기를 확실히 줄 것이다. 휴대 전화의 사이트를보고 양방향으로 매우 긴 스크롤바를 가져 오는 것이 자주 좌절되기 때문에 모바일 브라우저를 중요하게 생각합니다. 나는 사용자가 모바일 사이트를 만들고 나아가는 것이 더 간단하고 더 나은지를 결정하려고 노력하고 있습니다. 그것은 – 1252748

+1

[감소 된 기능] (http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/)을 가질 필요가 없습니다. 모바일에보다 빠른로드 시간을 제공 할 수 있습니다. 다시 한 번 감사드립니다! – 1252748

0

미디어 쿼리와 CSS를 통해 단순히 콘텐츠를 "숨길"수는 없습니다. 설정 방법에 따라 콘텐츠를 숨기고있는 것이 아니라로드되는 것이 아닙니다.

또한 미디어 쿼리를 사용하여 뷰포트에 따라 이미지 해상도를 선택할 수 있습니다. 저해상도 이미지를 휴대 기기로 전송하고 고해상도 이미지를 망막 디스플레이로 전송할 수 있습니다.

참조 : 응답의 http://css-tricks.com/snippets/css/retina-display-media-query/

http://menacingcloud.com/?c=highPixelDensityDisplays

http://www.leemunroe.com/responsive-design/

관련 문제