Der vollständige Leitfaden zu CSS-Medienabfragen (Media Qures)

In diesem Artikel lernen Sie CSS-Medienabfragen (Media Quires) kennen, stellen die Syntaxdefinition von Medienabfragen im Detail vor, erlernen die Verwendungsfähigkeiten von Medienabfragen anhand von drei spezifischen Layoutbeispielen und führen in einige Kenntnisse über SCSS- und CSS-Attribute ein.

Was ist SCSS?

Sass: Sass Basics (sass-lang.com)

SCSS ist ein Präprozessor für CSS, der leistungsfähiger ist als normales CSS. [Empfohlenes Lernen: CSS-Video-Tutorial]

• Sie können Selektoren verschachteln, um den Code besser zu verwalten und zu verwalten.
• Verschiedene Werte können zur einfachen Wiederverwendung in Variablen gespeichert werden.
• Sie können Mixins verwenden, um doppelte Codes für eine einfache Wiederverwendung zu mischen.

SCSS-Import-HTML

Methode eins VSCODE-Plug-in

[Empfohlenes Lernen: „Vscode-Einführungs-Tutorial“]

Methode zwei manuelle Kompilierung

npm install -g sass

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

<link> ::写在HTML里

Mögliche Probleme

Es wurde abgelehnt, den Stil von „http://127.0.0.1:5500/CSS Media Queries/css/style.css“ anzuwenden, da sein MIME-Typ („text/html“) kein unterstützter Stylesheet-MIME-Typ und streng ist Die MIME-Prüfung ist aktiviert.

Lösung: 404 Nicht gefunden, die angegebene Dateiadresse ist falsch.

CSS-Attribut Hintergrundgröße

enthalten;

Das Seitenverhältnis des Bildes bleibt unverändert, zoomen Sie auf das Bild selbst, um es vollständig anzuzeigen, sodass der Container einen leeren Bereich hat

cover;

Das Bildseitenverhältnis bleibt unverändert, verteilt sich über die gesamte Breite und Höhe des Containers und der überschüssige Teil des Bildes wird abgeschnitten

100 %;

Das Bildseitenverhältnis VerhältnisÄnderungen , auf die gleiche Größe skalieren wie die Breite und Höhe des Div.

CSS-Medienabfragen

Mit CSS-Medienabfragen können Sie responsive Websites für alle Bildschirmgrößen vom Desktop bis zum Mobilgerät erstellen.

Syntax

Definition

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

• Medienabfrageanweisung, @media
• Medienabfragetyp, Bildschirm
• abgedeckter Bildschirmbereich, maximale Breite: 768 Pixel
• Stil ändern, schreiben Stile hier

Ausführlich

Medienabfrageanweisung

Medienabfragen beginnen mit der @media-Anweisung. Der Zweck besteht darin, dem Browser mitzuteilen, dass wir eine Medienabfrage angegeben haben. Art der Medienabfrage und Burger, das sind zwei Nachfragebedingungen.

Jetzt haben Sie eine Bedingung identifiziert, den Bildschirmmedienabfragetyp. Wenn Sie andere Bedingungen angeben möchten, beispielsweise innerhalb eines bestimmten Bildschirmbereichs, können Sie und zum Herstellen einer Verbindung verwenden.

@media screen

Abfragetypen überspringen
• Sie können einfach „Min-Breite“ und „Max-Breite“ verwenden, um Medienabfragetypen zu überspringen.

• @media screen and (max-width : 768px) {
    .container{
       // 在screen媒体类型,屏幕宽度

Mehrere Bedingungsanforderungen
• Wenn die Bedingungen größer oder gleich drei sind, kann zum Verbinden ein Komma verwendet werden.

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

Bildschirm-Haltepunkt

Der Bildschirm-Haltepunkt wird verwendet, um die Kategorie der Bildschirmbreite innerhalb eines Bereichs anzugeben. Derzeit gibt es keinen Standard-Bildschirm-Haltepunkt.

Erfahren Sie, wie Sie den Fallcode verwenden und herunterladen

20220922162945_CSS media query.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>
        <der vollst leitfaden zu css-medienabfragen qures>
      </der>
</div>
      <div>
        <der vollst leitfaden zu css-medienabfragen qures>
      </der>
</div>
      <div>
        <der vollst leitfaden zu css-medienabfragen qures>
      </der>
</div>
      <div>
        <der vollst leitfaden zu css-medienabfragen qures>
      </der>
</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__"] {
    Der vollständige Leitfaden zu CSS-Medienabfragen (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__"] {

      // 重新修改图片大小适应移动端
      Der vollständige Leitfaden zu CSS-Medienabfragen (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__"] {
    Der vollständige Leitfaden zu CSS-Medienabfragen (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__"] {
    Der vollständige Leitfaden zu CSS-Medienabfragen (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__"] {

      // 重新修改图片大小适应移动端
      Der vollständige Leitfaden zu CSS-Medienabfragen (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前端）

Das obige ist der detaillierte Inhalt vonDer vollständige Leitfaden zu CSS-Medienabfragen (Media Qures). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!