Le guide complet des requêtes multimédias CSS (Media Qures)

Cet article vous amène à apprendre les requêtes multimédias CSS (Media Quires), présente en détail la définition de la syntaxe des requêtes multimédias, apprend les compétences d'utilisation des requêtes multimédias à partir de trois exemples de mise en page spécifiques et présente quelques connaissances sur les attributs scss et css.

Qu'est-ce que SCSS

Sass : Sass Basics (sass-lang.com)

SCSS est un préprocesseur pour CSS, qui est plus puissant que le CSS classique. [Apprentissage recommandé : Tutoriel vidéo CSS]

• Vous pouvez imbriquer des sélecteurs pour mieux maintenir et gérer le code.
• Diverses valeurs peuvent être stockées dans des variables pour une réutilisation facile.
• Vous pouvez utiliser Mixins pour mélanger les codes en double afin de les réutiliser facilement.

scss import html

Méthode un plug-in VSCODE

[Apprentissage recommandé : "Tutoriel d'introduction au vscode"]

Méthode deux, compilation manuelle

npm install -g sass

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

<link> ::写在HTML里

Problèmes possibles

Refus d'appliquer le style de 'http://127.0.0.1:5500/CSS Media Queries/css/style.css' car son type MIME ("text/html") n'est pas un type MIME de feuille de style pris en charge et est strict La vérification MIME est activée.

Solution : 404 Not Found, l'adresse du fichier fournie est erronée.

Attribut CSS background-size

contain;

Le rapport hauteur/largeur de l'image reste inchangé, zoomez sur l'image elle-même pour qu'elle soit entièrement affichée, le conteneur aura donc une zone vide

couverture

Le rapport hauteur/largeur de l'image reste inchangé, s'étend sur toute la largeur et la hauteur du conteneur, et la partie excédentaire de l'image sera coupée

100% ;

L'aspect de l'image ratiochanges, échelle à la même taille que la largeur et la hauteur du div.

CSS Media Queries

Les requêtes multimédia CSS vous permettent de créer des sites Web réactifs pour toutes les tailles d'écran, du bureau au mobile.

syntaxe

définition

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

• instruction de requête multimédia, @media
• type de requête multimédia, écran
• plage d'écran couverte, largeur maximale : 768px
• Changer de style, écrire styles ici

En profondeur

Déclaration de requête média

Les requêtes média commencent par l'instruction @media. Le but est d'indiquer au navigateur que nous avons spécifié une requête multimédia.

Type de requête multimédia

• tous tous les appareils multimédias
• appareil d'impression
• écran d'ordinateur, tablette, écran de téléphone
• lecteur d'écran vocal

@media screen

Pourquoi ajouter et

Achetez quelque chose chez KFC, vous voulez du poulet frit et hamburgers, ce sont deux conditions de demande.

Vous avez maintenant identifié une condition, le type de requête média d'écran. Si vous souhaitez spécifier d'autres conditions, par exemple si vous souhaitez le spécifier dans une certaine plage d'écran, vous pouvez utiliser et pour vous connecter.

@media screen and (max-width : 768px) {
  .container{
     // 在screen媒体类型,屏幕宽度<h3 id="Ignorer-les-types-de-requêtes">Ignorer les types de requêtes</h3><p>Vous pouvez simplement utiliser min-width et max-width pour ignorer les types de requêtes multimédias. </p><pre class="brush:php;toolbar:false">@media (min-width : 480px) and (max-width : 768px) {
  .container{
     // 在屏幕宽度为 480px 和 768px 之间这部分代码将被触发
  }
}

Exigences de conditions multiples

Lorsque les conditions sont supérieures ou égales à trois, une virgule peut être utilisée pour se connecter.

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

Point d'arrêt d'écran

Le point d'arrêt d'écran est utilisé pour spécifier la catégorie de largeur d'écran dans une plage. Il n'y a actuellement aucun point d'arrêt d'écran standard.

Apprenez à utiliser et télécharger le code de cas

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>
        <le guide complet des requ multim css qures>
      </le>
</div>
      <div>
        <le guide complet des requ multim css qures>
      </le>
</div>
      <div>
        <le guide complet des requ multim css qures>
      </le>
</div>
      <div>
        <le guide complet des requ multim css qures>
      </le>
</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__"] {
    Le guide complet des requêtes multimédias 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__"] {

      // 重新修改图片大小适应移动端
      Le guide complet des requêtes multimédias 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__"] {
    Le guide complet des requêtes multimédias 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__"] {
    Le guide complet des requêtes multimédias 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__"] {

      // 重新修改图片大小适应移动端
      Le guide complet des requêtes multimédias 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前端）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!