저는 방금 CSS @media queries을 발견했습니다. 그리고 나는 그들이 훌륭하다고 생각합니다! 그러나, 나는 모든 브라우저가 그들을 지원하지 않는다는 것을 안다. (즉, I.E.의 최신 버전을 제외한 모든 버전).CSS @media 쿼리를 사용할 때 기본 스타일 시트의 모범 사례는 무엇입니까?
내 기본 스타일 시트에서 어떻게해야합니까? 일반 화면을 타겟팅해야합니까? 가장 낮은 공통 분모의 경로를 찾아 모바일 스타일 시트를로드해야합니까? 아니면 디자인을 완전히 유체 화해야합니까?
@media 쿼리를 지원하지 않는 브라우저의 기본 스타일 시트를 만들 때 일반적으로 좋은 계획은 무엇입니까?
'모바일 우선'접근 방식인지 '데스크톱 우선'방식인지에 따라 다릅니다.
@media를 지원하지 않는 데스크탑 브라우저에서는 데스크탑이 먼저 모바일 스타일 시트 규칙을 무시하기 때문에 먼저 문제가 발생하지 않아야합니다. 유일한 문제는 미디어 쿼리를 지원하지 않는 모바일 브라우저입니다. 데스크톱 에서처럼 페이지를 렌더링합니다. 그러나 대부분의 스마트 폰은 win7 이전의 휴대폰을 제외하고 미디어 쿼리를 지원합니다. 문제는 당신이 그 전화를 지원하고 싶은지입니다. 스타일 시트는 다음과 같아야합니다.
body {
width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 500px) {
/* override desktop rules to accommodate small screens*/
body{
width: auto;
margin: 0;
}
다른 접근법은 모바일 우선입니다. 모바일 용 기본 스타일 시트를 만든 다음 미디어 쿼리를 사용하여 데스크톱 사용자를위한 양념을 만듭니다. 데스크톱 규칙을 별도의 파일에 넣고 미디어 쿼리 및 조건부 주석을 사용하여 최신 데스크톱 브라우저 및 IE에서로드 할 수 있습니다. 하지만 여기에 문제는 IE 모바일도 조건부 코멘트를 지원하므로 사전 win7 전화 지원이 없습니다.
<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->
가 많은 도움이됩니다 디자인 유체를 만들기 : 당신의 HTML은 같은 것을 보일 것입니다. 목표는 화면 크기에 관계없이 사이트가 항상 좋아 보이게 할 수 있다는 것입니다. 창 크기를 조정하여 사용해보십시오. 화면이 좁 으면 유체 디자인으로 사이드 바를 아래쪽으로 움직일 수 없습니다. 이를 위해 미디어 쿼리가 필요합니다.
행운을 빌어 요.