2011-12-22 2 views
3

나는 단지 반응이 빠른 레이아웃으로 사이트를 개발하는 방법을 읽었습니다. 생각을 이해했으며 브라우저 크기에 따라 콘텐츠를 다르게 스타일링 할 수 있다고 생각합니다.jquery 모바일과 함께 미디어 쿼리를 사용할 수 있습니까?

그러나 Jquery 모바일을 살펴본 결과 UI가 마음에 들었습니다.

내 질문은 두 가지를 결합 할 수 있습니까? 즉. PC/Mac에서 볼 때 정상적으로 렌더링되는 웹 페이지가있을 수 있지만 브라우저 너비가 320px (예 :) 이하로 떨어지면 Jquery 모바일을 사용하여 전환 할 수 있습니까?

나는 생각 this'd의 데이터 역할 '속성과 함께, 내 페이지에서 JQuery와 모바일 스크립트를 포함하지만, 브라우저가 특정 크기 경우에만 즉, JQuery와 모바일 스타일 시트를 포함하여 가능 :

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

이 모든 것이 가능합니까? Jquery 모바일을 다루지 않는 무언가에 Jquery 모바일을 사용하려고하는지 여부를 알 수 없습니다. 나는 단지 완전히 분리 된 사이트를 가져야 만한다. 독립 실행 형 모바일 콘텐츠가 포함 된 http://m.mysite.com? 아니면 적응 형 웹 사이트를 가질 수 있습니까?

감사합니다.

답변

2

예 JQM은 미디어 쿼리를 지원 2 가지 디자인이 어떻게 다른지와 같은 요소에 달려 있습니다. 그 위에 320 ~ 아래 하나 다른 ..

의 차이는, 별도의 모바일 웹 사이트가하는 것은 좋은 생각이 거대한 경우 ..

그러나 차이가 최소 인 경우, 당신은 단지 CSS 미디어와 그것을 처리 할 수 ​​

검색어. 당신은 다른 크기의 화면을 처리하는 반응 형 웹 디자인과 CSS 미디어 쿼리를 결합 할 수 있습니다

..이 질문을 받았다으로

1

...

답 :

+0

별도의 사이트를 보유하고 있다는 것에 대한 제 관심은 콘텐츠를 미러링해야한다는 것입니다. 두 사이트가 매우 다른 경우 다른 사이트를 만드는 경우에만 두 번째 사이트를 만들 수 있습니다. 내가 말하는 상황에서 콘텐츠가 같기를 원한다면 다른 장치에서 다르게 렌더링하고 싶습니다. 어떤 경우에는 내가 옳다고 생각합니다. 미디어 쿼리는 잘 했어. JQuery 모바일 UI를 사용하고 싶었습니다. – alimac83

+0

맞아 ... 미디어 쿼리가 다른 화면 크기를 타겟팅하기위한 기본 방법이어야합니다.이 경우 CSS 만 유지해야합니다 ... 다른 부분은 Sencha 터치, Flowplayer, jQTouch를 jQuery와 별도로 고려할 수 있습니다. 모바일뿐만 아니라 ... – testndtv

1

질문은 정말 대답하지 않았다.

JQM은 모바일 사이트에서만 사용할 수 있으며 CSS 미디어 쿼리 만 사용하는 데스크톱 버전에서는 사용할 수 없습니다. 완전히 다른 사이트를 만들고 리디렉션을해야합니다.

더 나은 옵션은 모바일 및 데스크톱 버전 모두에서 JQM을 사용하는 것입니다.이 경우 CSS 미디어 쿼리가 완벽하게 작동합니다. 이렇게하면 JQM을 사용하는 방법과 사이트를 디자인하는 방법이 모두 제한됩니다. 기존의 현대 데스크탑 디자인을 JQM으로 만들 수는 없습니다.

JQM 데모는 미디어 쿼리를 사용하여 데스크탑 및 태블릿 크기 브라우저에서 2 열 레이아웃으로, 전화기에서는 단일 열로 변환합니다. 이런 식으로하는 문제 : 페이지 전체가 사이드 메뉴 전환과 같은 div를 의미하는 페이지처럼 작동하고 새 페이지로 다시로드되기 때문에 페이드 전환 만 사용됩니다. 전체 페이지를 포함하지 않는 일반적인 AJAX 로딩 콘텐츠는 전체 페이지를 포함 시키거나 일반 JQM 방식을 벗어난 사용자 지정을 수행해야합니다.경우에 따라서는 그리 어렵지 않을 수도 있지만 JS 코드가 올라가고 특정 애플리케이션을 훨씬 더 복잡하게 만듭니다. 또한 CSS가 JQM 데모보다 더 복잡한 디자인을 위해 빨리 벗어나는 것을 볼 수 있습니다.

관련 문제