この記事では、CSS メディアクエリ (Media Quires) を学習し、メディアクエリの構文定義を詳細に紹介し、3 つの具体的なレイアウト例からメディアクエリの使用スキルを学び、scss および css 属性の知識を紹介します。

SCSS とは

#Sass: Sass の基礎 (sass-lang.com)

SCSS とはCSS 通常の CSS よりも強力なプリプロセッサ。 [推奨される学習: css ビデオチュートリアル ]

セレクターをネストして、コードをより適切に保守および管理できます。
さまざまな値を変数に保存して簡単に再利用できます。
Mixins を使用すると、重複したコードを混合して簡単に再利用できます。

#scss import html

方法 1 VSCODE プラグイン

# #【推奨される学習: 「

vscode 入門チュートリアル

」]

方法 2 の手動コンパイル

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' からのスタイルの適用を拒否しました

解決策:

404 見つかりません。指定されたファイルアドレスが正しくありません。

CSS プロパティの背景サイズ

contain;

画像のアスペクト比は変更されず、

ズームします。画像単独で完全に表示できるため、コンテナには空白の領域が残ります。

cover;

画像のアスペクト比は変更されません。

はコンテナ全体の幅と高さをカバーし、画像の余分な部分は切り取られます

# #100%;

画像のアスペクト比を変更

し、divの幅と高さと同じサイズに拡大縮小します。

CSS メディアクエリ

CSS メディアクエリを使用すると、デスクトップからモバイルまで、あらゆる画面サイズに対応するレスポンシブな Web サイトを作成できます。

# 文法

定義

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

ログイン後にコピー

メディアクエリステートメント、@media

メディアクエリタイプ、screen

カバーされる画面範囲、最大幅: 768px
スタイルの変更、ここにスタイルを書き込みます
詳細
メディアクエリステートメント

メディアクエリは @media ステートメントで始まります。目的は、メディアクエリを指定したことをブラウザに伝えることです。

メディアクエリタイプ

all すべてのメディアデバイス

print 印刷デバイス

screen コンピューター、タブレット、携帯電話の画面
speech スクリーンリーダー
```
@media screen
```
ログイン後にコピー
KFC で何かを買うとき、フライドチキンとハンバーガーが欲しい、この 2 つの要件があります。

これで、条件である画面メディアクエリタイプが特定されました。他の条件を指定したい場合、例えば特定の画面範囲内で指定したい場合は、とを使用して接続できます。

@media screen and (max-width : 768px) {
  .container{
     // 在screen媒体类型,屏幕宽度<p>クエリ タイプをスキップ</p><p>min-width と max-width を使用するだけで、メディア クエリ タイプをスキップできます。 </p><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 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>
        <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 中国語 Web サイトの他の関連記事を参照してください。