다음과 같은 미디어 쿼리를 선언 할 때 주요 장점/단점이 있는지 궁금합니다.사용할 미디어 쿼리 기술을
3 가지 주요 방법이있는 것 같습니다. 이유가 있습니까? 그 차이점은 무엇입니까?
<link type="text/css" rel="stylesheet" media="screen and (max-width:320px)" href="mobile.css">
대
@import
내가 링크 확인해 기법을 사용하는 순간
@media (within css file)
대,하지만 알고 관심을 가질만한 경우 특히 CSS 파일 내에서 @media, 어떤면에서 더 효율적이거나 더 나은 실천으로 간주되었습니다. 사전에
감사
첫 번째 두 가지 방법이 다른 파일을로드 할 수있는 별도의 HTTP 요청을하게됩니다; 마지막 방법은 단일 파일의 모든 변형을 포함합니다.
CSS를 구성하는 방법과 CSS가 다른 미디어 쿼리에 얼마나 차이가 있는지에 주로 달려 있습니다. 별도의 파일에서 작업하기가 더 쉽고 배포하기 전에이를 자동으로 단일 파일로 결합하는 빌드 프로세스가없는 경우 처음 두 가지 방법이 적절합니다.
각 파일을 직접 참조하고 HTML에서 미디어 쿼리를 보려면 HTML 버전을 사용하십시오. 현재 매체에 적합한 CSS를 호출하는 래퍼 CSS 파일이 있고 다양한 호출로 HTML이 어지럽히 지 않게하려면 @import 버전을 사용하십시오. 두 경우 모두 미디어 별 스타일 시트가 별도의 HTTP 요청으로로드됩니다.
모든 파일을 하나의 파일에 저장하거나 파일이 여러 개 있지만 빌드 도구를 사용하여 파일을 단일 파일로 결합하는 경우 마지막 방법을 사용하십시오. 이 page
적절한 대답은 선언 :
는 @media
@media all and (min-width: 480px) {…}
그것은 가장 인기있는 접근 방식과 일반적으로 잘 작동을 통해 미디어 쿼리를 선언합니다.
가끔은 큰 CSS 파일을 분리하고 휴대 전화, 태블릿 및 데스크톱 용 CSS 규칙을 별도의 파일로 추출해야합니다. 이러한 경우 다음과 같은 방법으로는
는 있습니다@import @import url("tablet.css") all and (min-width: 480px);
을 통해 CSS 파일에 대한 링크
<link rel="stylesheet" href="tablet.css" media="all and (min-width: 480px)" />
삽입으로 HTML 페이지에 포함 ... 합리적 포함 된 파일의 수를 늘리면 서버 및 서버로드에 대한 요청 수가 증가합니다.. 이 가능성을 현명하게 사용하십시오.