모바일 디자인을위한 미디어 쿼리를 사용하는 가장 좋은 방법

미디어 쿼리가 무엇이고 왜 사용되는지는 알고 있지만 모바일 사이트를 개발하는 가장 좋은 방법은 무엇인지 잘 모르겠습니다.모바일 디자인을위한 미디어 쿼리를 사용하는 가장 좋은 방법

예 : 필요한 스타일이 모두 포함 된 스타일 시트가있는 mysite.com이 있습니다 (꽤 큰 파일이라고 가정 해 보겠습니다). 이 시점에서 내 스타일 중 어느 것도 낮은 화면 해상도 또는 다른 장치를 대상으로하지 않습니다.

그런 다음 내 사이트의 모바일 버전을 만들기로 결정했습니다. 쉽게하기 위해, 나는 현재 아이폰 사용자만을 대상으로 할 것이고 코드가 누군가 아이폰으로 내 사이트를 방문했다면 모바일 버전을 얻을 것이다.

내 질문 : 사용자가 모바일 버전을 볼 수 있도록 이러한 추가 스타일을 포함 할 수있는 가장 좋은 장소는 어디입니까? 이 스타일을 원래 스타일 시트에 포함시켜야합니까, 아니면 스타일 시트로 분리하면됩니까?

내 사이트가 완전히 수레로 만들어졌지만 내 모바일 버전이 모든 요소를 겹쳐서 표시한다고 가정 해 보겠습니다. 미디어 쿼리를 사용하여 어떻게 표시합니까? float : none;을 선언하는 것만 큼 간단합니까? 또는 뭔가?

기본적으로 위 단락에서 물어 보려는 것은 스타일 시트를 구성하여 기본 색상과 연결되는 위치 또는 데스크톱에서와 같이 모바일 버전에 유지되는 항목을 연결하는 방법입니다. 모바일 버전에서는 모든 것을 쌓아 올리는 것과 같은 차이점이 있습니까?

스타일 시트의 미디어 쿼리 섹션에있는 규칙은 기본적으로 사용자가 미디어가 아닌 쿼리 섹션에서 선언 한 내용을 '과장'하고 있습니까?

미디어 쿼리를 사용하는 사례가 많이 있지만 전체 사이트의 작동 예제를 한 번도 찾을 수 없습니다. mobile.css와 main.css가 동일한 HTML 페이지에 링크되어있는 경우 모바일 버전에서 내 사이트의 일부 측면을 유지하면서 다른 사이트를 변경하려면 어떻게 함께 작동합니까?

마지막 질문 : 완전히 고정 너비의 디자인이 가능하지만 미디어 쿼리를 계속 사용할 수 있습니까? 코드는 브라우저가 특정 너비/높이를 지나치게 축소하거나 확장 할 때 여전히 감지 할 수 있습니다.

오랫동안 혼란스러운 질문에 사과드립니다. 내가 묻고 싶은 것을 말할 수 있기를 바랍니다.

출처

2011-09-09 Mark Bubel

가이 할 수있는 (! 적어도) 네 가지 방법은 다음과 같습니다 하단에 미디어 쿼리와

일반 CSS는 (그래서 그들은 위의 CSS 무시)
두 개 (또는 그 이상)의 CSS 파일을 링크 요소의 HTML에
서버 측 감지 후 리디렉션

,691 example.com/mobile 예 : m.example.com, 또는 위해를 다른 CSS 링크를 추가

서버 측 감지 미디어 쿼리를 사용하여로드

작은 변화 (float : none, 다른 글꼴 크기 등)를 말하면 1에 가야합니다. CSS에 많은 변경 사항이있는 경우 2 또는 3을 사용합니다 (3 isn 화면 속성이 아닌 사용자 에이전트에 의존 할 때 좋음). HTML과 CSS가 변경되면 4를 사용합니다.

Internet Explorer 6 - 8에서 작업을 확인하면 미디어 쿼리를 무시하고 모바일 비트를 포함하여 모든 CSS를 사용할 수 있습니다. 1을 사용하십시오.https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4이

출처

2011-09-09 15:52:24

감사합니다. 나는 이것들을 점검 할 것이다. –

I 옵션을 감지하는 냄새 3.

사용자 에이전트를 추천 할 것입니다 :

1과 여기

2를 사용하는 사이트의 몇 가지 예에 대한 http://mediaqueri.es/에서보세요 것이 도움이 될 또 다른 자원이다 장치는 나쁘지 않습니다. 수년 동안 모바일 웹 사이트를 만드는 데 끊임없이 노력해 왔습니다. PHP device detection을 사용하면 다른 장치에서 사이트를보다 잘 제어 할 수 있습니다. CSS 파일을 어떤 기기로 가져갈 지 선택할 수있을뿐만 아니라 기기 카테고리별로로드되는 애셋/마크 업을 선택할 수도 있습니다. 모바일, 태블릿, 데스크톱, TV 등

이 방법을 사용하면 JavaScript가 비활성화되어 있어도 휴대 전화가 데스크톱 에셋/스타일/마크 업을받지 못하도록 할 수 있으며 그 반대의 경우도 가능합니다.

출처

2011-12-15 19:30:30 hybrid

나는 모바일 브라우저/장치 감지를 전혀 사용하지 말 것을 제안합니다. 이것이 미디어 쿼리가 탁월한 곳입니다. 더 유기적으로 생각하고 웹 사이트를 새로운 기기 및 모바일 브라우저로 지속적으로 업데이트하지 않고 하나의 CSS 파일을 사용하고 CSS3의 최대 너비/최대 장치 너비를 활용하십시오.

헤더에있는 장소 <meta name="viewport" content="width=device-width"/>하고 CSS 파일이 데스크톱 버전과 모바일 버전으로 구문 분석 :

/* Desktop Version */ 

@media screen { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
} 

/* SmartPhone Version */ 

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) { 
    body { 
     margin-left: 0px; 
     margin-top: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     text-align: center; 
     background-color:#900; 
     background-image:url(../images/m_bg_white.png); 
     background-repeat: repeat-y; 
     background-position: center top; 
    } 
}

출처

2012-01-10 10:16:54

내가 옵션 3을 권하고 싶지 않다 스니핑 나쁜 선택의 시간과 시간을 입증되었습니다 다시. 장치/브라우저가 잘못된 정보를 제공하면 어떻게됩니까? 쉽게 도용당했습니다.

하지 마십시오. 미디어 쿼리는 모든 방법을 제공합니다. 지원되는 표준입니다.

출처

2015-04-01 23:34:53 Splic3

모바일 디자인을위한 미디어 쿼리를 사용하는 가장 좋은 방법

답변

관련 문제