本篇文章帶大家學(xué)習(xí)CSS媒體查詢（Media Quires），詳細介紹了媒體查詢語法定義，從三個具體布局例子學(xué)習(xí)媒體查詢的使用技巧；并介紹了一些scss、css屬性知識。

CSS媒體查詢完全指南（Media Quires）

前端（vue）入門到精通課程：進入學(xué)習(xí)
API 文檔、設(shè)計、調(diào)試、自動化測試一體化協(xié)作工具：點擊使用

什么是SCSS

Sass: Sass Basics (sass-lang.com)

SCSS 是 CSS 的預(yù)處理器，它比常規(guī) CSS 更強大。【推薦學(xué)習(xí)：css視頻教程】

可以嵌套選擇器，更好維護、管理代碼。
可以將各種值存儲到變量中，方便復(fù)用。
可以使用 Mixins 混合重復(fù)代碼，方便復(fù)用。

scss導(dǎo)入html

方法一 VSCODE 插件

CSS媒體查詢完全指南（Media Quires）

【推薦學(xué)習(xí)：《vscode入門教程》】

方法二手動編譯


npm install -g sass  sass input.scss output.css ::單次編譯 sass --watch scss/index.scss css/index.css ::多次編譯   ::寫在HTML里
登錄后復(fù)制

可能遇到的問題

Refused to apply style from 'http://127.0.0.1:5500/CSS媒體查詢/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

解決方法： 404 Not Found，提供的文件地址有誤。

CSS屬性 background-size

contain;

圖片寬高比不變，縮放至圖片自身能完全顯示出來，所以容器會有留白區(qū)域

CSS媒體查詢完全指南（Media Quires）

cover;

圖片寬高比不變，鋪滿整個容器的寬高，而圖片多出的部分則會被截掉

CSS媒體查詢完全指南（Media Quires）

100%;

圖片寬高比改變，縮放至和div寬高一致的尺寸。

CSS媒體查詢完全指南（Media Quires）

CSS媒體查詢

CSS媒體查詢允許您創(chuàng)建從桌面到移動設(shè)備的所有屏幕尺寸的響應(yīng)式網(wǎng)站。

CSS媒體查詢完全指南（Media Quires）

語法

定義


@media screen and (max-width: 768px){   .container{    // 你的代碼   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

媒體查詢聲明， @media
媒體查詢類型， screen
覆蓋的屏幕范圍， max-width: 768px
更改樣式， Write styles here

深入

媒體查詢聲明

媒體查詢以@media聲明開頭。目的是告訴瀏覽器我們已指定媒體查詢。

媒體查詢類型

all 所有媒體設(shè)備
print 打印設(shè)備
screen 電腦、平板、手機屏幕
speech 屏幕閱讀器


@media screen
登錄后復(fù)制

為什么要加and

在肯德基買東西，你想要炸雞和漢堡，這是兩個需求條件。

現(xiàn)在你已經(jīng)確定了一個條件，即 screen 媒體查詢類型。你要指定其他條件，比如想要規(guī)定在某一個屏幕范圍內(nèi)，那么就可以用 and 來連接。


@media screen and (max-width : 768px) {   .container{      // 在screen媒體類型,屏幕寬度<=768px時這部分代碼將被觸發(fā)   } }
登錄后復(fù)制

跳過查詢類型

你可以只用 min-width & max-width 來跳過媒體查詢類型。


@media (min-width : 480px) and (max-width : 768px) {   .container{      // 在屏幕寬度為 480px 和 768px 之間這部分代碼將被觸發(fā)   } }
登錄后復(fù)制

多個條件需求

當條件大于等于三個時，可以用 comma 連接。


@media screen, (min-width : 480px) and (max-width : 768px) {   .container{      // 在screen媒體類型,屏幕寬度為 480px 和 768px 之間這部分代碼將被觸發(fā)   } }
登錄后復(fù)制

屏幕斷點

屏幕斷點（screen break-point）用于規(guī)定一個范圍內(nèi)的屏幕寬度所屬類別，目前沒有標準的屏幕斷點。

CSS媒體查詢完全指南（Media Quires）

學(xué)習(xí)使用、案例代碼下載

20220922162945_CSS媒體查詢.zip

學(xué)習(xí)使用①初入響應(yīng)式

CSS媒體查詢完全指南（Media Quires）

讓我們試著寫一個響應(yīng)式頁面。新建main.js、media.html、style.scss，即時編譯并watch style.scss。

main.js


// 當改變窗口大小、窗口加載時觸發(fā) screen window.onresize = screen; window.onload = screen;  // 一個函數(shù)獲取當前屏幕寬度并將內(nèi)容設(shè)置在ID為size的元素上  function screen() {   Width = window.innerWidth;   document.getElementById("size").innerHTML     = "Width : " + Width + " px"  }
登錄后復(fù)制

media.html

首先我們先建立一個media.html。然后導(dǎo)入剛剛寫的main.js。導(dǎo)入style.css，是scss即時編譯的css文件。


                                   程序員勇往直前，當導(dǎo)入main.js后，這句話會被替換掉     
   
  
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

保存顏色變量

SCSS創(chuàng)建四個變量分別保存十六進制RGB


$color-1 : #cdb4db ; // 手機端 $color-2 : #fff1e6 ; // 平板端 $color-3 : #52b788 ; // 筆記本端 $color-4 : #bee1e6 ; // 臺式大屏
登錄后復(fù)制

居中container元素


.container {    display: grid;   place-items: center;    background-color: $color-1;   height: 100vh; }
登錄后復(fù)制

place-items 是 align-items 、 justify-items 的簡寫。

max-width 媒體查詢

CSS媒體查詢完全指南（Media Quires）


@media screen and (max-width : 500px) {   .container {     background-color: $color-1;   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

?當前完整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 {   // 還沒添加內(nèi)容 }  .container {   background-color: white;   height: 100vh;   display: grid;   place-items: center; }   @media screen and (max-width : 500px) {   .container {     background-color: $color-1;   } }
登錄后復(fù)制

min-width 媒體查詢

CSS媒體查詢完全指南（Media Quires）


@media screen and (min-width : 500px){   .container{     background-color: $color-1;   } }
登錄后復(fù)制

與max-width相反。寬度>=500px時代碼生效。

屏幕斷點

根據(jù)四種類型，我們將有四個媒體查詢。

CSS媒體查詢完全指南（Media Quires）

給scss添加新的變量


$mobile : 576px; $tablet : 768px; $laptop : 992px; $desktop : 1200px;
登錄后復(fù)制

添加一系列媒體查詢

在添加媒體查詢時，需要遵循正確的數(shù)據(jù)，從最大寬度到最小寬度。


@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;   } }
登錄后復(fù)制

現(xiàn)在改變屏幕寬度將顯示不同的背景顏色。

學(xué)習(xí)使用②響應(yīng)式個人介紹

CSS媒體查詢完全指南（Media Quires）

profile.html


                       
     Lucyna Kushinada
             Home 
        Portfolio 
        Contacts 
     
                     
                      Hello ?
             I'm Lucy
             A Netrunner From
             Night City
         
       
     
                            
                       
                       
                       
     
   
  
登錄后復(fù)制

profile.scss

scss需要編譯成css再導(dǎo)入到html中，我們先修改全局默認樣式。


* {   margin: 0px 5px;    padding: 0px;   box-sizing: border-box;    body {     font-family: sans-serif;   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

如果你不會Flexbox屬性請看我的Vue之旅、01 深入Flexbox布局完全指南 - 小能日記

先把所有樣式類與子級結(jié)構(gòu)寫好。嵌套在樣式類中的&__logo是.header__logo的快捷方式


.header{   &__logo{}   &__menu{} }  .main{   &__image{}   &__text{} }  .footer{   [class ^="footer__"]{} }
登錄后復(fù)制

然后添加樣式，.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%; }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

我們修改 .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;     // 讓各個元素產(chǎn)生一定間隔距離     gap: 15px;   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

再修改 .main


.main {   // 圖片和文字塊排版會采用行形式   display: flex;   flex-direction: row;    border: 2px solid black;   height: 80%;    &__image {     // 添加圖片     background-image: url("./images/Portrait.jpg");     // 寬度為main寬度的50%     width: 50%;     // 縮放至圖片自身能完全顯示出來，足夠大的容器會有留白區(qū)域     background-size: contain;     // 不重復(fù)平鋪圖片     background-repeat: no-repeat;     background-position: left center;   }    &__text {     // 寬度為main寬度的50%     width: 50%;   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

給文字加樣式


  &__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;   } }
登錄后復(fù)制

接下來給圖片添加樣式


.footer{   // 類匹配器,能夠選擇一個類的集合,如style class 為footer__1、footer__2   [class^="footer__"] {     img {       width: 5.3vw;     }   } }  .footer{   display: flex;   flex-direction: row;    align-items: center;   justify-content: flex-end;   gap: 20px;    margin-right: 10%; }
登錄后復(fù)制

我們還需要添加媒體查詢


@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__"] {        // 重新修改圖片大小適應(yīng)移動端       img {         width: 45px;         height: 45px;       }     }   } }
登錄后復(fù)制

?當前完整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;     // 讓各個元素產(chǎn)生一定間隔距離     gap: 15px;   } }  .main {   // 圖片和文字塊排版會采用行形式   display: flex;   flex-direction: row;    height: 80%;    &__image {     // 添加圖片     background-image: url("./images/Portrait.png");     // 寬度為main寬度的50%     width: 50%;     // 縮放至圖片自身能完全顯示出來，足夠大的容器會有留白區(qū)域     background-size: contain;     // 不重復(fù)平鋪圖片     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__"] {     img {       width: 5.3vw;     }   } }  .footer {   display: flex;   flex-direction: row;    align-items: center;   justify-content: flex-end;   gap: 20px;    margin-right: 10%;    [class^="footer__"] {     img {       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__"] {        // 重新修改圖片大小適應(yīng)移動端       img {         width: 45px;         height: 45px;       }     }   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

學(xué)習(xí)使用③卡片布局

CSS媒體查詢完全指南（Media Quires）

我們會用到第一個例子中的 main.js 函數(shù)來顯示窗口寬度。

card.html


                                    A
       B
       C
     
             D
       E
       F
     
             G
       H
       I
     
   
    


感谢您访问我们的网站，您可能还对以下资源感兴趣：
最新国产成人精品2024









主站蜘蛛池模板：
欧美精品亚洲人成在线观看|
日韩精品无码专区免费播放|
亚洲精品视频在线看|
99久久er这里只有精品18|
精品一区二区无码AV|
国产高清在线精品二区一|
亚洲欧美精品AAAAAA片|
国产亚洲精品a在线观看
|
国产高清一级毛片精品|
91精品美女在线|
久久精品国产99久久久|
亚洲性日韩精品国产一区二区|
国产精品无码素人福利|
国产精品亚洲欧美一区麻豆|
四虎成人精品无码|
在线成人精品国产区免费|
久草热8精品视频在线观看|
亚洲无删减国产精品一区|
国产精品自拍一区|
97视频在线观看这里只有精品|
国产精品无套内射迪丽热巴|
自拍偷在线精品自拍偷无码专区|
久久精品国产亚洲AV不卡|
精品亚洲欧美中文字幕在线看|
国产精品亚洲专区无码WEB|
国产成人精品曰本亚洲79ren|
亚洲精品性视频|
欧美日韩精品一区二区|
在线精品视频播放|
北岛玲日韩精品一区二区三区|
亚洲精品欧美日韩|
午夜精品视频在线|
国产69精品久久久久99|
99久久精品费精品国产
|
久久这里只有精品久久|
性色精品视频网站在线观看|
一本一道久久精品综合|
国产精品国产AV片国产|
久久久久99精品成人片牛牛影视|
欧洲精品码一区二区三区免费看|
少妇亚洲免费精品|

<del id="a0yme"></del>
<strike id="a0yme"></strike>
<ul id="a0yme"></ul><strike id="a0yme"></strike>
  
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

card.scss


* {   margin: 0px;   padding: 0px 10px;   box-sizing: border-box;    body {     font-family: sans-serif;     font-size: 55px;   } }  #size {   position: absolute;   // 設(shè)置為絕對定位   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;   // 設(shè)置為當前視窗大小的三分之一   height: (100vh)/3;    // 元素居中   display: grid;   place-items: center; }  @media (max-width: 650px) {    [class ^="row-"] {     flex-direction: column;   }    [class ^="box-"] {     width: 100%;   } }
登錄后復(fù)制

CSS媒體查詢完全指南（Media Quires）

（學(xué)習(xí)視頻分享：css視頻教程、web前端）

2025年7月
一	二	三	四	五	六	日
« 6月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

什么是SCSS

scss導(dǎo)入html

方法一 VSCODE 插件

方法二 手動編譯

可能遇到的問題

CSS屬性 background-size

contain;

cover;

100%;

CSS媒體查詢

語法

定義

深入

媒體查詢聲明

媒體查詢類型

為什么要加and

跳過查詢類型

多個條件需求

屏幕斷點

學(xué)習(xí)使用、案例代碼下載

學(xué)習(xí)使用①初入響應(yīng)式

main.js

media.html

保存顏色變量

居中container元素

max-width 媒體查詢

?當前完整scss代碼

min-width 媒體查詢

屏幕斷點

添加一系列媒體查詢

學(xué)習(xí)使用②響應(yīng)式個人介紹

profile.html

profile.scss

?當前完整scss代碼

學(xué)習(xí)使用③卡片布局

card.html

card.scss

相關(guān)推薦

熱門標簽

近期文章

方法二手動編譯