CSS 미디어 쿼리 순서

CSS 미디어 쿼리에 대한 질문이 있습니다. 내 질문은 내가 내 css 미디어 쿼리가 차이를 만들 것인지 여부입니다. 예를 들어CSS 미디어 쿼리 순서

<link rel="stylesheet" href="desktop.css" media=""> 
<link rel="stylesheet" href="laptop.css" media=""> 
<link rel="stylesheet" href="mobile.css" media=""> 



<link rel="stylesheet" href="mobile.css" media=""> 
<link rel="stylesheet" href="laptop.css" media=""> 
<link rel="stylesheet" href="desktop.css" media="">

내가 여러 미디어 쿼리와 데스크톱, 노트북 및 모바일 장치를 대상으로했다고 말했습니다. 이렇게하면 디자인이 여러 장치에 표시되는 방식이 변경됩니까? 링크의 순서가 중요합니까?

출처

2012-12-10 JaPerk14

아니오. 유효한'media' 유형을 설정하십시오. – diEcho

짧은 것이다. 엄청나게.

하지만 노크 효과가있을 수 있습니다.

이름에서 알 수 있듯이 Cascading Style Sheets에서 알 수 있듯이 다른 스타일로 캐스케이드됩니다.

예를 들어, desktop.css에 스타일이있는 경우 페이지의 모든 요소로 롤아웃됩니다. 그러면 laptop.css이 표시되고 desktop.css이 타겟팅하는 다른 스타일이 있습니다. laptop.css의 스타일이 선행합니다. 또한, mobile.css

예에서 스타일 적용 : 미디어 첩없이

//Desktop.css 
body { 
     background: pink; 
} 

//laptop.css 
body { 
     background: yellow; 
} 

//mobile.css 
body { 
     background: green; 
}

는 배경이 녹색된다는 것을 의미합니다. 우리가 이렇게하면

//laptop.css 
body { 
     background: yellow; 
} 

//mobile.css 
body { 
     background: green; 
} 

//Desktop.css 
body { 
     background: pink; 
}

배경은 분홍색이 될 것입니다.

항목을 문서를 계단식으로 배치하십시오. 모바일을 사이트의 기본 버전으로 사용하지 않으려면 데스크톱보다 먼저 모바일을 배치하지 마십시오.

출처

2012-12-10 20:56:18

노트북 & 노트북 용 미디어 쿼리를 먼저 배치해야합니다. min-width : ... px를 사용하면 큰 화면의 경우 CSS가 무시되고 화면의 너비가 최소 인 경우 무시됩니다.

예를 들어 최소 너비가 0 일 때 mobile.css가 사용되며 최소 너비가 700 인 경우 laptop.css이고 최소 너비가 1000 인 경우 desktop.css가 사용됩니다. 화면이 800px 너비의 경우 mobile.css가 사용되며 laptop.css도 사용되지만 desktop.css는 사용되지 않습니다. 다른 방법을 사용하면 모든 화면의 너비가 0px이므로 mobile.css가 매번 재정의됩니다.

출처

2012-12-10 20:58:05 andy

아니요 일반적으로 데스크톱이나 핸드 헬드와 같은 미디어 유형을 사용하는 경우에만 사용하지 마십시오. 모바일 장치는이 쿼리를 위조하여 더 나은 스타일 시트를 얻을 수 있다고 알려져 있습니다. 당신이 할 것 스타일 시트에서 화면 해상도, 픽셀 밀도 등을 지정하는보다 강력한 미디어 쿼리를 사용

@media (min-width: 768px) and (max-width: 1024px) { 
    body { 
    background: #ccc; 
    } 
}

를 쿼리들이 정상 폭포 적용하고 덮어 쓸 수 있습니다 겹치면.

사양 : http://www.w3.org/TR/css3-mediaqueries/

자습서 :이 스타일의 상위를 선언 한 후 범위를 좁힐해야하므로, 이전보다 우선합니다 같은 CSS의 마지막 선언으로 http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

출처

2012-12-10 20:59:26 piatek

예 : 색상은 일반적으로 모든 데스크톱에서 동일하며 모바일 및 요소 크기가 다릅니다.

출처

2014-01-09 16:13:49 Kelvin

CSS 미디어 쿼리 순서

답변

관련 문제