>  기사  >  웹 프론트엔드  >  CSS 미디어 쿼리에 대한 전체 가이드(Media Qures)

CSS 미디어 쿼리에 대한 전체 가이드(Media Qures)

青灯夜游
青灯夜游앞으로
2022-09-29 20:41:132656검색

이 글에서는 CSS 미디어 쿼리(Media Quires)를 배우고, 미디어 쿼리의 구문 정의를 자세히 소개하고, 세 가지 특정 레이아웃 예를 통해 미디어 쿼리의 사용 기술을 배우고, 일부 scss 및 css 속성 지식을 소개합니다.

SCSS란 무엇입니까

Sass: Sass Basics (sass-lang.com)

SCSS는 일반 CSS보다 더 강력한 CSS용 전처리기입니다. [추천 학습: css 비디오 튜토리얼]

  • 선택기를 중첩하여 코드를 더 잘 유지하고 관리할 수 있습니다.
  • 쉽게 재사용할 수 있도록 다양한 값을 변수에 저장할 수 있습니다.
  • 믹스인을 사용하면 쉽게 재사용할 수 있도록 중복 코드를 혼합할 수 있습니다.

scss import html

Method one VSCODE 플러그인

[권장 학습: "vscode 입문 튜토리얼"]

Method two 매뉴얼 컴파일

npm install -g sass

sass input.scss output.css ::单次编译
sass --watch scss/index.scss css/index.css ::多次编译

<link> ::写在HTML里

가능한 문제

MIME 유형('text/html')이 지원되는 스타일시트 MIME 유형이 아니고 엄격하기 때문에 'http://127.0.0.1:5500/CSS Media Queries/css/style.css'의 스타일 적용을 거부했습니다. MIME 확인이 활성화되었습니다.

해결 방법: 404 찾을 수 없음, 제공된 파일 주소가 잘못되었습니다.

CSS 속성 background-size

contain;

이미지 가로 세로 비율은 변경되지 않습니다. 완전히 표시되도록 이미지 자체를 확대하면 컨테이너에 빈 영역이 생깁니다

이미지 가로 세로 비율은 변경되지 않고 컨테이너의 전체 너비와 높이로 퍼지며, 이미지의 초과 부분은 잘립니다.

100%;

이미지 가로 세로 비율 ratiochanges

, div의 너비 및 높이와 동일한 크기로 조정됩니다.

CSS 미디어 쿼리

CSS 미디어 쿼리를 사용하면 데스크톱에서 모바일까지 모든 화면 크기에 맞는 반응형 웹사이트를 만들 수 있습니다.

구문

정의

@media screen and (max-width: 768px){
  .container{
   // 你的代码
  }
}

미디어 쿼리 문, @media

    미디어 쿼리 유형, 화면
  • 가린 화면 범위, 최대 너비: 768px
  • 스타일 변경, 쓰기 스타일은 여기
  • 자세히
미디어 쿼리 문

미디어 쿼리는 @media 문으로 시작합니다. 목적은 미디어 쿼리를 지정했음을 브라우저에 알리는 것입니다.

미디어 쿼리 유형

모든 미디어 장치

    인쇄 인쇄 장치
  • 스크린 컴퓨터, 태블릿, 휴대폰 화면
  • 음성 스크린 리더
@media screen
  • 추가하고
  • KFC에서 물건을 구매하는 이유는 프라이드 치킨과 버거는 두 가지 수요 조건이 있습니다.

    이제 조건, 즉 화면 미디어 쿼리 유형을 식별했습니다. 특정 화면 범위 내에서 지정하고 싶은 경우 등 다른 조건을 지정하고 싶은 경우에는 및를 이용하여 연결하시면 됩니다.

    @media screen and (max-width : 768px) {
      .container{
         // 在screen媒体类型,屏幕宽度쿼리 유형 건너뛰기<p></p>min-width 및 max-width를 사용하여 미디어 쿼리 유형을 건너뛸 수 있습니다. <h3 id="跳过查询类型"><pre class="brush:php;toolbar:false">@media (min-width : 480px) and (max-width : 768px) {
      .container{
         // 在屏幕宽度为 480px 和 768px 之间这部分代码将被触发
      }
    }
    여러 조건 요구 사항

    조건이 3보다 크거나 같으면 쉼표를 사용하여 연결할 수 있습니다.

    @media screen, (min-width : 480px) and (max-width : 768px) {
      .container{
         // 在screen媒体类型,屏幕宽度为 480px 和 768px 之间这部分代码将被触发
      }
    }

    화면 중단점

    화면 중단점은 범위 내의 화면 너비 범주를 지정하는 데 사용됩니다. 현재 표준 화면 중단점이 없습니다.

    케이스 코드 사용 및 다운로드 방법 알아보기

    20220922162945_CSS 미디어 쿼리.zip

    学习使用①初入响应式

    让我们试着写一个响应式页面 。新建main.js、media.html、style.scss,即时编译并watch style.scss。

    main.js

    // 当改变窗口大小、窗口加载时触发 screen
    window.onresize = screen;
    window.onload = screen;
    
    // 一个函数获取当前屏幕宽度并将内容设置在ID为size的元素上
    
    function screen() {
      Width = window.innerWidth;
      document.getElementById("size").innerHTML 
       = "Width : " + Width + " px" 
    }

    media.html

    首先我们先建立一个media.html。然后导入刚刚写的main.js。导入style.css,是scss即时编译的css文件。

    nbsp;html>
    
    
      <title></title>
      <meta>
      <meta>
      <link>
      <script></script>
    
    
    
      <div>
        <div>
          程序员勇往直前,当导入main.js后,这句话会被替换掉
        </div>
      </div>
    
    

    保存颜色变量

    SCSS创建四个变量分别保存十六进制RGB

    $color-1 : #cdb4db ; // 手机端
    $color-2 : #fff1e6 ; // 平板端
    $color-3 : #52b788 ; // 笔记本端
    $color-4 : #bee1e6 ; // 台式大屏

    居中container元素

    .container {
    
      display: grid;
      place-items: center;
    
      background-color: $color-1;
      height: 100vh;
    }

    place-items 是 align-items 、 justify-items 的简写。

    max-width 媒体查询

    @media screen and (max-width : 500px) {
      .container {
        background-color: $color-1;
      }
    }

    ?当前完整scss代码

    $color-1 : #cdb4db; // 手机端
    $color-2 : #fff1e6; // 平板端
    $color-3 : #52b788; // 笔记本端
    $color-4 : #bee1e6; // 台式大屏
    
    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    
      body {
        font-size: 35px;
        font-family: sans-serif;
      }
    }
    
    .container {
      //元素居中
    
      display: grid;
      place-items: center;
    
      background-color: $color-1;
      height: 100vh;
    }
    
    #size {
      position: absolute;
    
      top: 60%;
      left: 50%;
    
      transform: translateX(-50%);
    
      color: red;
      font-size: 35px;
    }
    
    .text {
      // 还没添加内容
    }
    
    .container {
      background-color: white;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    
    
    @media screen and (max-width : 500px) {
      .container {
        background-color: $color-1;
      }
    }

    min-width 媒体查询

    @media screen and (min-width : 500px){
      .container{
        background-color: $color-1;
      }
    }

    与max-width相反。宽度>=500px时代码生效。

    屏幕断点

    根据四种类型,我们将有四个媒体查询。

    给scss添加新的变量

    $mobile : 576px;
    $tablet : 768px;
    $laptop : 992px;
    $desktop : 1200px;

    添加一系列媒体查询

    在添加媒体查询时,需要遵循正确的数据,从最大宽度到最小宽度。

    @media screen and (max-width: $desktop){
      .container{
        background-color: $color-4;
      }
    }
    @media screen and (max-width: $laptop){
      .container{
        background-color: $color-3;
      }
    }
    @media screen and (max-width: $tablet){
      .container{
        background-color: $color-2;
      }
    }
    @media screen and (max-width : $mobile){
      .container{
        background-color: $color-1;
      }
    }

    现在改变屏幕宽度将显示不同的背景颜色。

    学习使用②响应式个人介绍

    profile.html

    nbsp;html>
    
    
    
      <title></title>
      <meta>
      <meta>
    
    
    
      <div>
        <div></div>
        <div>Lucyna Kushinada</div>
        <div>
          <div> Home </div>
          <div> Portfolio </div>
          <div> Contacts </div>
        </div>
        <div>
          <div>
            <div></div>
            <div>
                <div>Hello ?</div>
                <div>I'm <span>Lucy</span>
    </div>
                <div>A Netrunner From</div>
                <div>Night City</div>
            </div>
          </div>
        </div>
        <div>
          <div>
            <css qures>
          </css>
    </div>
          <div>
            <css qures>
          </css>
    </div>
          <div>
            <css qures>
          </css>
    </div>
          <div>
            <css qures>
          </css>
    </div>
        </div>
      </div>
    
    

    profile.scss

    scss需要编译成css再导入到html中,我们先修改全局默认样式。

    * {
      margin: 0px 5px;
    
      padding: 0px;
      box-sizing: border-box;
    
      body {
        font-family: sans-serif;
      }
    }

    如果你不会Flexbox属性请看 我的Vue之旅、01 深入Flexbox布局完全指南 - 小能日记

    先把所有样式类与子级结构写好。嵌套在样式类中的&__logo是.header__logo的快捷方式

    .header{
      &__logo{}
      &__menu{}
    }
    
    .main{
      &__image{}
      &__text{}
    }
    
    .footer{
      [class ^="footer__"]{}
    }

    然后添加样式,.container采用flex布局,按列布局。.header__menu也采用flex布局的方式。

    .container{
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .header{
      display: flex;
      flex-direction: row;
      border: 2px solid red;
      height: 10%;
        
      &__logo{}
    
      &__menu{
        display: flex;
        flex-direction: row;
      }
    }
    
    .main{
      border: 2px solid black;
      height: 80%;
    }
    
    .footer{
      border: 2px solid green;
      height: 10%;
    }

    我们修改 .header

    .header {
      display: flex;
      flex-direction: row;
      border: 2px solid red;
      height: 10%;
      // 元素垂直居中
      align-items: center;
      // 元素均匀分布
      justify-content: space-between;
      &__logo {
        font-size: 4vw;
      }
    
      &__menu {
        display: flex;
        flex-direction: row;
        font-size: 2.5vw;
        // 让各个元素产生一定间隔距离
        gap: 15px;
      }
    }

    再修改 .main

    .main {
      // 图片和文字块排版会采用行形式
      display: flex;
      flex-direction: row;
    
      border: 2px solid black;
      height: 80%;
    
      &__image {
        // 添加图片
        background-image: url("./images/Portrait.jpg");
        // 宽度为main宽度的50%
        width: 50%;
        // 缩放至图片自身能完全显示出来,足够大的容器会有留白区域
        background-size: contain;
        // 不重复平铺图片
        background-repeat: no-repeat;
        background-position: left center;
      }
    
      &__text {
        // 宽度为main宽度的50%
        width: 50%;
      }
    }

    给文字加样式

      &__text {
        // 宽度为main一半宽度
        width: 50%;
        // 让每行字按列排列
        display: flex;
        flex-direction: column;
    
        // 居中
        justify-content: center;
        align-items: center;
    
        gap: 15px;
    
        &-1 {
          font-size: 10vw;
        }
    
        &-2,
        &-3,
        &-4 {
          font-size: 5vw;
        }
      }
    
      span {
        color: red;
      }
    }

    接下来给图片添加样式

    .footer{
      // 类匹配器,能够选择一个类的集合,如style class 为footer__1、footer__2
      [class^="footer__"] {
        CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
          width: 5.3vw;
        }
      }
    }
    
    .footer{
      display: flex;
      flex-direction: row;
    
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
    
      margin-right: 10%;
    }

    我们还需要添加媒体查询

    @media (max-width: 650px) {
      .header {
    
        justify-content: center;
    
        &__logo {
          font-size: 40px;
        }
    
        // 隐藏menu
        &__menu {
          display: none;
        }
      }
    
      .main {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        &__image {
          // 图片大小
          height: 200px;
          width: 200px;
          background-size: 100%;
    
          // 圆形图片
          border-radius: 100%;
          background-position: center;
          margin-bottom: 5%;
        }
    
        // 修改字体样式
        &__text {
          width: 100%;
    
          &-1 {
            // 让hello不显示
            display: none;
          }
    
          &-2,
          &-3,
          &-4 {
            font-size: 30px;
          }
        }
      }
    
      .footer {
        // 元素按中心对齐
        justify-content: center;
        margin: 0px;
    
        // gap: 20px;  注意这个没有改,默认还是生效的
        [class^="footer__"] {
    
          // 重新修改图片大小适应移动端
          CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
            width: 45px;
            height: 45px;
          }
        }
      }
    }

    ?当前完整scss代码

    * {
      margin: 0px 5px;
    
      padding: 0px;
      box-sizing: border-box;
    
      body {
        font-family: sans-serif;
      }
    }
    
    .container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .header {
      display: flex;
      flex-direction: row;
      height: 10%;
    
      // 元素垂直居中
      align-items: center;
      // 元素均匀分布
      justify-content: space-between;
    
      &__logo {
        font-size: 4vw;
      }
    
      &__menu {
        display: flex;
        flex-direction: row;
    
        font-size: 2.5vw;
        // 让各个元素产生一定间隔距离
        gap: 15px;
      }
    }
    
    .main {
      // 图片和文字块排版会采用行形式
      display: flex;
      flex-direction: row;
    
      height: 80%;
    
      &__image {
        // 添加图片
        background-image: url("./images/Portrait.png");
        // 宽度为main宽度的50%
        width: 50%;
        // 缩放至图片自身能完全显示出来,足够大的容器会有留白区域
        background-size: contain;
        // 不重复平铺图片
        background-repeat: no-repeat;
        background-position: left center;
      }
    
      &__text {
        // 宽度为main一半宽度
        width: 50%;
        // 让每行字按列排列
        display: flex;
        flex-direction: column;
    
        // 居中
        justify-content: center;
        align-items: center;
    
        gap: 15px;
    
        &-1 {
          font-size: 6vw;
        }
    
        &-2,
        &-3,
        &-4 {
          font-size: 5vw;
        }
      }
    
      span {
        color: red;
      }
    }
    
    .footer {
      [class^="footer__"] {
        CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
          width: 5.3vw;
        }
      }
    }
    
    .footer {
      display: flex;
      flex-direction: row;
    
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
    
      margin-right: 10%;
    
      [class^="footer__"] {
        CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
          width: 5.3vw;
        }
      }
    }
    
    @media (max-width: 650px) {
      .header {
    
        justify-content: center;
    
        &__logo {
          font-size: 40px;
        }
    
        // 隐藏menu
        &__menu {
          display: none;
        }
      }
    
      .main {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        &__image {
          // 图片大小
          height: 200px;
          width: 200px;
          background-size: 100%;
    
          // 圆形图片
          border-radius: 100%;
          background-position: center;
          margin-bottom: 5%;
        }
    
        // 修改字体样式
        &__text {
          width: 100%;
    
          &-1 {
            // 让hello不显示
            display: none;
          }
    
          &-2,
          &-3,
          &-4 {
            font-size: 30px;
          }
        }
      }
    
      .footer {
        // 元素按中心对齐
        justify-content: center;
        margin: 0px;
    
        // gap: 20px;  注意这个没有改,默认还是生效的
        [class^="footer__"] {
    
          // 重新修改图片大小适应移动端
          CSS 미디어 쿼리에 대한 전체 가이드(Media Qures) {
            width: 45px;
            height: 45px;
          }
        }
      }
    }

    学习使用③卡片布局

    我们会用到第一个例子中的 main.js 函数来显示窗口宽度。

    card.html

    nbsp;html>
    
    
    
      <title></title>
      <meta>
      <meta>
      <link>
      <script></script>
    
    
    
      <div>
        <div>
          <div>A</div>
          <div>B</div>
          <div>C</div>
        </div>
    
        <div>
          <div>D</div>
          <div>E</div>
          <div>F</div>
        </div>
    
        <div>
          <div>G</div>
          <div>H</div>
          <div>I</div>
        </div>
      </div>
      <div></div>
    
    
    

    card.scss

    * {
      margin: 0px;
      padding: 0px 10px;
      box-sizing: border-box;
    
      body {
        font-family: sans-serif;
        font-size: 55px;
      }
    }
    
    #size {
      position: absolute;
      // 设置为绝对定位
      top: 60%;
      left: 50%;
      // 水平居中
      transform: translateX(-50%);
      color: red;
      font-size: 40px;
    }
    
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    
      gap: 30px;
    }
    
    [class ^="row-"] {
      display: flex;
      flex-direction: row;
      gap: 30px;
    }
    
    [class ^="box-"] {
    
      background-color: #c4c4c4;
      border: 2px solid black;
    
      width: (100%)/3;
      // 设置为当前视窗大小的三分之一
      height: (100vh)/3;
    
      // 元素居中
      display: grid;
      place-items: center;
    }
    
    @media (max-width: 650px) {
    
      [class ^="row-"] {
        flex-direction: column;
      }
    
      [class ^="box-"] {
        width: 100%;
      }
    }

    (学习视频分享:css视频教程web前端

    위 내용은 CSS 미디어 쿼리에 대한 전체 가이드(Media Qures)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제