HTML5 CSS3미디어 쿼리 연습을 위한 샘플 코드 공유-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 CSS3미디어 쿼리 연습을 위한 샘플 코드 공유

黄舟

Mar 28, 2017 pm 03:21 PM

먼저 미디어를 소개하자면, 정확히 말하면 CSS 미디어 쿼리(CSS 미디어 쿼리), 미디어 쿼리에는 미디어 유형과 너비, 높이, 색상과 같은 하나 이상의 속성이 포함되어 스타일 시트의 범위를 제한합니다. 🎜>Expression. CSS3에서 추가한 미디어 쿼리를 사용하면 콘텐츠를 수정하지 않고도 특정 기기 범위에 스타일을 적용할 수 있습니다. 그렇다면 미디어를 정의하는 방법을 살펴보세요. 아래 코드를 보면 확실히 짐작할 수 있습니다.

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}</style>

문서에는 미디어 쿼리가 true인 경우 관련성이 있다고 나와 있습니다. 일반적인 캐스케이딩 규칙에 따라 미디어 쿼리가 false를 반환하더라도 태그에 미디어 쿼리가 포함된 스타일 시트는 다운로드됩니다(적용되지 않음). 🎜>그래서 이것도 단점이군요. 특정 페이지에 대해 다양한 미디어 속성에 대응하기 위해 여러 스타일 표준을 정의하면 페이지 로딩 시간이 영향을 받게 되지만, 빠른 네트워크 시대에는 그렇습니다. 개발, 네트워크 속도도 지속적으로 향상되고 향상되므로 영향은 크지 않으며

미디어 여전히 논리 연산자

를 사용할 수 있습니다. and, not, only 등) 미디어 표현을 형성하고 더 복잡한 필터링 조건을 작성하려면 여기서는 이러한 표현을 하나씩 설명하지 않겠습니다.

다음으로 여러 데모를 사용하여 미디어의 사용법과 성능을 보여줍니다

오늘의 목적은 devicePixelRatio 속성의 변경 사항을 모니터링하는 방법을 탐색하는 것이므로 배경

스타일을 변경할 수 있습니다. 특정 p는 다른 devicePixelRatio 값 아래에 있습니다. 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            @media screen and (min-resolution: 2dppx) {
                #image {
                    background : red;
                }
            }
            @media screen and (min-resolution: 1dppx) {
                #image {
                background: #000;
            }
            }        </style>
    </head>
    <body>
        <p id="image" style="width:100px; height:100px"></p>
    </body>
</html>

코드가 있는데, 일반적인 상황에서는 어떻게 테스트해야 할까요? 분명히 특별한 상황이 있을 것입니다. 예를 들어 컴퓨터가 두 대의 모니터에 연결되어 있고 두 브라우저의 devicePixelRatio 속성이 다릅니다. 동일합니다. 축하합니다. 이미 테스트 조건이 있으므로 한 화면에서 다른 화면으로 페이지를 드래그하면 됩니다. ,

효과를 볼 수 있습니다. 학생들은 p의 배경색이 코드에 설정된 것과 같지 않음을 알 수 있습니다. 이는 다른 devicePixelRatio 속성 값에 따라 다릅니다. ?

이 코드는 제가 처음 작성한 코드입니다. 실행해 보니 처음에는 페이지를 화면으로 드래그해도 아무런 효과가 없었습니다. , 브라우저 콘솔에서 이유를 찾았습니다. 그렇다면 설정이 유효하지 않은 이유는 무엇입니까? 두 화면 아래 스타일 콘텐츠의 스크린샷을 살펴보겠습니다. 왼쪽은 최소 해상도가 1이고, 오른쪽은 2입니다.

🎜>

두 사진을 비교해 보면 최소 해상도가 2일 때 그 안에 정의된 속성이 덮어쓰기되어 적용되지 않는 것을 알 수 있습니다.

설명하려면 여기에 몇 가지 지식을 추가해야 할 것 같습니다. 즉, 코드에서 min- 및 max- 접두사의 구체적인 효과가 문서에 설명되어 있습니다. : 대부분의 미디어 속성에는 "크거나 같음"과 "작거나 같음"을 표현하는 데 사용되는 "min-" 및 "max-" 접두사가 붙습니다. 이렇게 하면 HTML 및

XML과 충돌하는 "" 문자를 사용할 수 없습니다. 미디어 속성에 값을 지정하지 않고 속성의 실제 값이 0이 아닌 경우 표현식은 true로 확인됩니다. 이 속성 값이 포함된 표현식은 브라우저가 이 속성 값이 없는 장치에서 실행 중인 경우 일반적으로 false를 반환합니다.

其实上面的说明已经帮我解释清楚了，我再通俗地和大家解释一下：当 devicePixelRatio 为 1 时，只有 min-resolution: 1dppx 这个条件满足，因此 p 的颜色是黑色没错；当 devicePixelRatio 为 2 时，两个 media 都满足条件，同时 CSS 的规则是后加载的样式将会覆盖先加载的样式，由于我么将 min-resolution: 1dppx 的 media 写在后面，因此如果两个 media 都满足条件的话， min-resolution: 1dppx 的 media 将会覆盖 min-resolution: 2dppx 的 media，因此不管你把页面拖到那个屏幕，那个 p 的背景色都是黑色。

那么我们将两个 media 调换一下位置，问题就顺利地解决了。

<style media="screen">
    @media screen and (min-resolution: 1dppx) {
        #image {
            background: #000;
        }
    }
    @media screen and (min-resolution: 2dppx) {
        #image {
            background : red;
        }
    }</style>

以上是根据不同的 media 条件设置不同的样式，这是 CSS 的做法，在 JavaScript 中，没有专门的方法来监听 window.devicePixelRatio 属性变化，那么该怎么监听 devicePixelRatio 属性的变化呢?方法也很简单，看看下面的代码，你一定就明白了：

window.matchMedia(&#39;screen and (min-resolution: 2dppx)&#39;).addListener(function(e) {
    console.info(e, window.devicePixelRatio);
});

稍微解释下，通过 window.matchMedia(‘media expression’) 方法获取到对应的 media，然后通过 addListener(function(e) {}) 来监听 media 的变化。

有玩过 Canvas 的朋友一定知道，要想绘制出来的内容效果最佳的话，Canvas 自身的 width 和 height 属性值与 style 中的 width 和 height 的比例应该恰好等于 devicePixelRatio 的值，所有如果你在切换不同 devicePixelRatio 属性值的屏幕时，没有重新设置 Canvas 的宽高的话，绘制出来的画面将不是最佳的效果。

接下来我们基于 HT for Web 的 3D 模型来做一个小实验。实验的内容是这样的，在 GraphView 中有一辆车根据某条路线前行，当拖到另外一个屏幕的时候，换辆车子。先来看看效果图：

上面两张图分别是在不同的屏幕中的截图，车子动起来的效果可以访问以下链接：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HT for Web</title>
        <style media="screen">
            @media screen and (min-resolution: 2dppx) {}
            html, body {
                padding: 0px;
                margin: 0px;
            }        </style>
        <script src="../../oldhtforweb/lib/core/ht.js"></script>
        <script src="../../oldhtforweb/lib/plugin/ht-modeling.js"></script>
        <script src="../../oldhtforweb/lib/plugin/ht-obj.js"></script>
        <script>
            ht.Default.setImage(&#39;road&#39;, &#39;./images/road.jpg&#39;);            
            var init = function() {
                g3d = new ht.graph3d.Graph3dView();                
                var dm = g3d.dm();
                g3d.addToDOM();
                g3d.setEye(1200, 300, 0);
                g3d.getNote = function(data) {                    
                if (data.getTag() !== &#39;carNode&#39;) return null;                    
                return &#39;DevicePixelRatio : &#39; + window.devicePixelRatio;
                };                
                var carIndex = 0;
                window.matchMedia(&#39;screen and (min-resolution: 2dppx)&#39;).addListener(function() {
                    carIndex = (carIndex + 1) % 2;                    
                    var obj = result[carIndex];
                    carNode.s(&#39;shape3d&#39;, obj.name);
                    ht.Default.setDevicePixelRatio();
                });                
                var polyline = createPath(dm, 300),
                    params = {
                        delay: 0,
                        duration: 10000,
                        easing: function(t){                            
                        return (t *= 2) < 1 ? 0.5 * t * t : 0.5 * (1 - (--t) * (t - 2));
                        },
                        action: function(v, t){                            
                        var length = g3d.getLineLength(polyline);                            
                        var offset = g3d.getLineOffset(polyline, length * v),
                                point = offset.point,
                                px = point.x,
                                py = point.y,
                                pz = point.z,
                                tangent = offset.tangent,
                                tx = tangent.x,
                                ty = tangent.y,
                                tz = tangent.z;
                            carNode.p3(px, py - 9, pz);
                            carNode.lookAt([px + tx, py + ty - 9, pz + tz], &#39;front&#39;);
                        },
                        finishFunc: function(){
                            ht.Default.startAnim(params);
                        }
                    },
                    carList = [ &#39;fordFocus&#39;, &#39;concept-sedan-01v2&#39;],
                    result = [], carNode = new ht.Node();
                carNode.setTag(&#39;carNode&#39;);
                carList.forEach(function(name, index) {
                    ht.Default.loadObj(&#39;./objs/&#39;+name+&#39;/&#39;+name+&#39;.obj&#39;, &#39;./objs/&#39;+name+&#39;/&#39;+name+&#39;.mtl&#39;, {
                        cube: true,
                        center: true,
                        shape3d: name,
                        finishFunc: function(modelMap, array, rawS3) {                            
                        var k = 110 / rawS3[0];
                            rawS3 = rawS3.map(function(v) { return v * k; });
                            result[index] = {                                
                            &#39;name&#39; : name,                                
                            &#39;modelMap&#39; : modelMap,                                
                            &#39;array&#39; : array,                                
                            &#39;rawS3&#39; : rawS3
                            };                            
                            if (index === 0) {                                
                            var node = carNode;
                                node.s({                                    
                                &#39;wf.width&#39; : 0,                                    
                                &#39;shape3d&#39; : name,                                   
                                 &#39;note.position&#39; : 44,                                    
                                 &#39;note&#39; : &#39;DevicePixelRatio : &#39; + window.devicePixelRatio,     
                                 &#39;note.face&#39; : &#39;top&#39;,                                    
                                 &#39;note.autorotate&#39; : true,                            
                                  &#39;note.font&#39; : &#39;46px arial, sans-serif&#39;
                                });
                                node.s3(rawS3);
                                node.r3(0, Math.PI, 0);
                                dm.add(node);
                                polyline.setElevation(rawS3[1] * 0.5 + 2);
                                ht.Default.startAnim(params);
                            }
                        }
                    });
                });
            };            var createPath = function(dm, radius) {                
            var polyline = new ht.Polyline();
                polyline.setThickness(2);

                polyline.s({                    
                &#39;shape.border.pattern&#39;: [16, 16],                    
                &#39;shape.border.color&#39;: &#39;rgba(0, 0, 0, 0)&#39;,                    
                &#39;shape3d.resolution&#39;: 300,                    
                &#39;3d.selectable&#39;: false
                });
                dm.add(polyline);                
                var cx = 0,
                    cy = radius * Math.PI * 0.5,
                    count = 500,
                    points = [{ x: radius, y: -cy, e: 0 }],
                    segments = [1];                
                    for (var k = 0; k < count + 1; k++) {                    
                    var angle = k * Math.PI / count;
                    points.push({
                        x: cx + radius * Math.cos(angle),
                        y: cy + radius * Math.sin(angle),
                        e: 0
                    });
                    segments.push(2);
                }

                cy *= -1;
                radius *= -1;                
                for (var k = 0; k < count + 1; k++) {                    
                var angle = k * Math.PI / count;
                    points.push({
                        x: cx + radius * Math.cos(angle),
                        y: cy + radius * Math.sin(angle),
                        e: 0
                    });
                    segments.push(2);
                }

                polyline.setPoints(points);
                polyline.setSegments(segments);                
                var shape = new ht.Shape();
                shape.setPoints(points);
                shape.setSegments(segments);
                shape.s({                    
                &#39;top.visible&#39; : false,                    
                &#39;bottom.image&#39; : &#39;road&#39;,                    
                &#39;bottom.reverse.flip&#39; : true,                    
                &#39;bottom.uv.scale&#39; : [13, 1],                    
                &#39;back.visible&#39; : false,                    
                &#39;front.reverse.flip&#39; : true,                    
                &#39;3d.selectable&#39;: false
                });
                shape.setThickness(180);
                shape.setTall(15);
                shape.setClosePath(true);
                dm.add(shape);                
                return polyline;
            };        </script>
    </head>
    <body onload="init();">
    </body>
</html>

来介绍下这次 Demo 中都用到的了 HT for Web 的那些技术。

首先是车子，车子并不是通过 HT for Web 生成的，而是通过专业的 3D 工具设计，然后导出 obj 和 mtl 文件，HT for Web 对 obj 和 mtl 文件进行解析，然后显示在 Graph3dView 中，

在 obj 文档中，你会看到一个一个飞机的例子，飞机沿着设定好的路线飞行，你应该会想，这个寻路是怎么实现的呢？其实很简单，我们将路线切割成一个个很小很小的单元，然后根据算法依次获取到小单元的坐标设置到移动的物体上，这样物体就动起来了。

在 Demo 中，有一条很精致的马路，这条马路就是一个 Shape 节点，根据车的路径生成的马路，Shape 是一个六面体，因为首尾相连了，所以没有左右面，在这个例子中，我将马路的 back 和 top 面隐藏了，然后 bottom 面支持翻转，让 bottom 面的贴图显示在内表面上，这样马路就建成了。

위 내용은 HTML5 CSS3미디어 쿼리 연습을 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

H5 코드 : 깨끗하고 효율적인 html5 작성Apr 20, 2025 am 12:06 AM

깨끗하고 효율적인 HTML5 코드를 작성하는 방법은 무엇입니까? 답은 태그, 구조화 된 코드, 성능 최적화 및 일반적인 실수를 피함으로써 일반적인 실수를 피하는 것입니다. 1. 코드 가독성 및 SEO 효과를 향상시키기 위해 시맨틱 태그 등을 사용하십시오. 2. 적절한 계약과 의견을 사용하여 코드를 구성하고 읽을 수 있도록하십시오. 3. CDN 및 압축 코드를 사용하여 불필요한 태그를 줄임으로써 성능을 최적화합니다. 4. 태그가 닫히지 않은 것과 같은 일반적인 실수를 피하고 코드의 유효성을 확인하십시오.

H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AM

H5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.

H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AM

HTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.

H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.