새로운 CSS 미디어 쿼리 범위 구문

<p>CSS 미디어 쿼리 스코프 구문의 새로운 기능 :보다 간결하고 반응이 좋은 웹 디자인 </p> <p> CSS 미디어 쿼리는 특정 조건에 따라 요소 스타일을 선택하고 설정하는 핵심 도구입니다. 이러한 조건은 다양하지만 일반적으로 두 가지 범주로 나뉩니다. (1) 사용 된 미디어 유형 및 (2) 브라우저, 장치 및 사용자 환경의 특정 기능. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174156973483540.jpg" class="lazy" alt="The New CSS Media Query Range Syntax "> 예를 들어 <to> 인쇄 된 문서에 특정 CSS 스타일을 적용하려면 다음과 같습니다. </to></p> <mar> Ethan Marcotte는 반응 형 웹 디자인의 개념을 제안한 이후 뷰포트 너비를 기반으로 스타일을 적용 할 수있는 능력으로 인해 CSS 미디어 쿼리가 컨텐츠의 핵심 구성 요소가되었습니다. 브라우저의 뷰포트 너비가 특정 크기에 도달하면 브라우저 크기에 응답 할 수있는 설계 요소에 일련의 스타일 규칙이 적용됩니다. <p> </p> <the> <p> 연산자에게주의를 기울이십니까? 그것은 우리가 진술을 결합 할 수있게합니다. 이 예에서는 미디어 유형이 화면이고 </p> 기능이 30EM (또는 위)으로 설정된 조건을 결합합니다. 뷰포트 크기의 범위를 찾기 위해 똑같은 일을 할 수 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <st> 이제이 스타일은 단일 너비가 아닌 투명 뷰포트 너비 범위에 적용됩니다! <p> 그러나 <media> 그러나 미디어 쿼리 레벨 4 사양은 , </media></p> 및 및 와 같은 일반적인 수학적 비교 연산자를 사용하기위한 새로운 구문을 도입하여 뷰포트 너비 범위를 찾습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <a> 그것이 어떻게 작동하는지 더 깊이 이해합시다. <p> <oper oper> 새로운 비교 연산자 <code>and</code> <shows> 마지막 예제는 연산자를 사용하여 조건을 결합하여 범위를 "포지"하는 방법을 보여줍니다. 미디어 쿼리 레벨 4 사양의 주요 변화는 값을 결합하는 대신 값을 비교할 새로운 연산자가 있다는 것입니다. <code>min-width</code> : 하나의 값이 </shows></oper></p>보다 적고 다른 값이 인지 평가합니다. : 하나의 값이 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度在30em到80em之间时 */ @media screen and (min-width: 30em) and (max-width: 80em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">로그인 후 복사</div></div>보다 큰지 평가 <p> : 하나의 값이 </p>와 다른 값인지 평가합니다 <p> <code><</code> <<> : 하나의 값이 <code>></code> 다른 값보다 적은지 또는 다른 값 인지 평가합니다. : 하나의 값이 <code>=</code>보다 큰지 또는 다른 값인지 평가 </p> <we> 브라우저 너비가 600px 이상인 경우 스타일을 적용하는 미디어 쿼리를 작성하는 방법은 다음과 같습니다. <p> <how> 다음은 비교 연산자를 사용하여 동일한 내용을 작성하는 방법입니다. </how></p> <position> 포지셔닝 뷰포트 너비 범위 <c> CSS 미디어 쿼리를 작성할 때, 우리는 일반적으로 - "breaks"조건을 디자인하고 일련의 스타일을 적용하여 고칠 수 있습니다. 디자인은 많은 중단 점을 가질 수 있습니다! 일반적으로 두 폭 사이의 뷰포트를 기반으로합니다. 중단 점이 시작되고 중단 점이 끝납니다. <p> <how> 다음은 연산자를 사용하여 두 가지 중단 점 값을 결합하는 방법입니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <andon> 우리가 부울 <p> 연산자를 포기하고 새로운 스코프 비교 구문을 채택하면 미디어 쿼리를 작성하는 것이 얼마나 쉬운 지 이해하기 시작할 것입니다 : <code>and</code>. </p> <sim> 훨씬 간단합니다. 그리고이 미디어 쿼리의 역할을 명확하게 보여줍니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <support> 브라우저 지원 <of> 작성 당시,이 개선 된 미디어 쿼리 구문은 여전히 ​​초기 단계에 있으며 현재 지원은 <p>와 의 조합만큼 광범위하지 않습니다. 그러나 우리는 다가 가고 있습니다! 현재 Safari는 유일한 주요 예외이지만 집중할 수있는 해결되지 않은 문제가 있습니다. </p> 이 브라우저는 Caniuse의 데이터를 지원하며 자세한 내용이 포함되어 있습니다. 이 숫자는 브라우저 가이 기능과 이후 버전 에서이 기능을 지원한다는 것을 나타냅니다. <h3> 데스크탑 </h3> <p> <et et> 모바일/태블릿 PC <code>min-width</code> <code>max-width</code> </et></p> <p> 요약 <ively> 우리는 CSS 미디어 쿼리에서 뷰포트 너비 범위를 포지셔닝하기위한 새로운 구문을 광범위하게 소개합니다. Media Query Level 4 사양 이이 구문을 소개했으며 Firefox 및 Chromium 브라우저에서 채택되었으므로 새로운 비교 연산자를 사용하여 높이 및 종횡비와 같은 너비 이외의 다른 범위 미디어 기능과 결합 할 수 있습니다. </ively></p> <one> 이것은 레벨 4 사양에 의해 소개 된 최신 기능 중 하나이며 사용자 기본 설정을 기반으로 할 수있는 일련의 쿼리입니다. 거기에서 끝나지 않았습니다! 미디어 쿼리 레벨 5에 포함될 수있는 내용을 먼저 살펴 보려면 "CSS 미디어 쿼리에 대한 완전한 가이드"를 확인하십시오. <h4></h4></one></of></support></sim></andon></how></p></c></position></we></a></st></the></mar>

위 내용은 새로운 CSS 미디어 쿼리 범위 구문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!