我的Vue之旅、04 CSS媒體查詢完全指南(Media Quires)

来源:https://www.cnblogs.com/linxiaoxu/archive/2022/09/22/16719846.html
-Advertisement-
Play Games

我的前端之旅。本節學習CSS媒體查詢(Media Quires),詳細介紹了媒體查詢語法定義,從三個具體佈局例子學習媒體查詢的使用技巧。並介紹了一些scss、css屬性知識。 ...


什麼是SCSS

Sass: Sass Basics (sass-lang.com)

SCSS 是 CSS 的預處理器,它比常規 CSS 更強大。

  • 可以嵌套選擇器,更好維護、管理代碼。
  • 可以將各種值存儲到變數中,方便復用。
  • 可以使用 Mixins 混合重覆代碼,方便復用。

scss導入html

方法一 VSCODE 插件

image-20220921235316601

方法二 手動編譯

npm install -g sass

sass input.scss output.css ::單次編譯
sass --watch scss/index.scss css/index.css ::多次編譯

<link rel="stylesheet" href="css/index.css"> ::寫在HTML里

可能遇到的問題

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;

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

img

cover;

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

img

100%;

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

img

CSS媒體查詢

CSS媒體查詢允許您創建從桌面到移動設備的所有屏幕尺寸的響應式網站。

image-20220921230543173

語法

定義

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

image-20220921232503040

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

深入

媒體查詢聲明

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

媒體查詢類型

  • all 所有媒體設備
  • print 列印設備
  • screen 電腦、平板、手機屏幕
  • speech 屏幕閱讀器
@media screen

為什麼要加and

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

現在你已經確定了一個條件,即 screen 媒體查詢類型。你要指定其他條件,比如想要規定在某一個屏幕範圍內,那麼就可以用 and 來連接。

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

跳過查詢類型

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

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

多個條件需求

當條件大於等於三個時,可以用 comma 連接。

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

屏幕斷點

屏幕斷點(screen break-point)用於規定一個範圍內的屏幕寬度所屬類別,目前沒有標準的屏幕斷點。

image-20220921234931263

學習使用、案例代碼下載

20220922162945_CSS媒體查詢.zip

學習使用①初入響應式

image-20220922001441054

讓我們試著寫一個響應式頁面 。新建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文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="./style.css" rel="stylesheet">
  <script type="text/javascript" src="./main.js"></script>
</head>

<body>
  <div class="container">
    <div id="size">
      程式員勇往直前,當導入main.js後,這句話會被替換掉
    </div>
  </div>
</body>
</html>

image-20220921232937201

保存顏色變數

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 媒體查詢

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

image-20220922001441054


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 日常開發我們對一條DML語句較為熟悉,很多開發人員都瞭解sql的執行過程,比較熟悉,但是DDL是如何執行的呢,大部分開發人員可能不太關心,也認為沒必要瞭解,都交給DBA吧。 其實不然,瞭解一些能儘量避開一些ddl的坑,那麼下麵帶大家一起瞭解一下DDL執行的方式,。 ...
  • 2022-09-22 (4)set操作 ①添加操作(sadd): 例: sadd student A B ②查看操作(smembers):例: smembers student ③移除操作(srem):例: srem student A (5)zset(有序集合而且裡面的元素是不能重覆的)操作 ①添 ...
  • 最新版Other問題,請查看我最近的一片文章 我主要開發小型應用,周期較短,提審較頻,使用帳號也多,正常申請的三方購買的都有使用。提審時經常會遇到這樣那樣的問題,單獨說other-other,也曾遇到過不下10次,我將會導致出現這個問題的原因分為幾類: 1、帳號問題: 大概半年前的那段時間蘋果對帳號 ...
  • AU上傳ipa出現下圖紅框提示說明成功上傳,如果App Store後臺沒有出現構建版本, 請登錄 apple賬號對應的郵箱查看反饋,特別留意垃圾郵箱,無論成功還是失敗,apple都會發郵件 一、首先登錄iTunes Connect 後臺、查看ipa構建情況 https://appstoreconne ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 async await 語法是 ES7出現的,是基於ES6的 promise和generator實現的 generator函數 在之前我專門講個generator的使用與原理實現,大家沒瞭解過的可以先看那個手寫generator核心 ...
  • Common JS 是模塊化規範之一。每個文件都是一個作用域,文件裡面定義的變數/函數都是私有的,對其他模塊不可見。Common JS 規範在 Node 端和瀏覽器端有不同的實現。 ...
  • 接手的一個項目使用的是avue這個傻瓜式的專門給後端人員用的框架,文檔不夠友好,使用起來各種蛋疼(咱專業前端基本上不使用)。為此,專門記錄一下。當前avue版本2.8.12,如果要切換avue的版本,可以去https://cdn.jsdelivr.net/npm/@smallwei/[email protected] ...
  • REM rem是一個相對尺寸,它相對於html根元素來進行計算 類推3REM為48px。改變html根元素 font-size 屬性的大小。那麼REM值也會隨之改變。 html{ font-size: 50px; /* 預設 16px */ } 此時3REM為150px。接下來我們通過一個小案例來演 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1.講故事 在分析的眾多dump中,經常會遇到各種奇葩的問題,僅通過dump這種快照形式還是有很多問題搞不定,而通過 perfview 這種粒度又太粗,很難找到問題之所在,真的很頭疼,比如本篇的 短命線程 問題,參考圖如下: 我們在 t2 時刻抓取的dump對查看 短命線程 毫無幫助,我根 ...
  • 在日常後端Api開發中,我們跟前端的溝通中,通常需要協商好入參的數據類型,和參數是通過什麼方式存在於請求中的,是表單(form)、請求體(body)、地址欄參數(query)、還是說通過請求頭(header)。 當協商好後,我們的介面又需要怎麼去接收這些數據呢?很多小伙伴可能上手就是直接寫一個實體, ...
  • 許多情況下我們需要用到攝像頭獲取圖像,進而處理圖像,這篇博文介紹利用pyqt5、OpenCV實現用電腦上連接的攝像頭拍照並保存照片。為了使用和後續開發方便,這裡利用pyqt5設計了個相機界面,後面將介紹如何實現,要點包括界面設計、邏輯實現及完整代碼。 ...
  • 思路分析 註冊頁面需要對用戶提交的數據進行校驗,並且需要對用戶輸入錯誤的地方進行提示! 所有我們需要使用forms組件搭建註冊頁面! 平時我們書寫form是組件的時候是在views.py裡面書寫的, 但是為了接耦合,我們需要將forms組件都單獨寫在一個地方,需要用的時候導入就行! 例如,在項目文件 ...
  • 思路分析 登錄頁面,我們還是採用ajax的方式提交用戶數據 唯一需要學習的是如何製作圖片驗證碼! 具體的登錄頁面效果圖如下: 如何製作圖片驗證碼 推導步驟1:在img標簽的src屬性里放上驗證碼的請求路徑 補充1.img的src屬性: 1.圖片路徑 2.url 3.圖片的二進位數據 補充2:字體樣式 ...
  • 哈嘍,兄弟們! 最近有許多小伙伴都在吐槽打工好難。 每天都是執行許多重覆的任務 例如閱讀新聞、發郵件、查看天氣、打開書簽、清理文件夾等等, 使用自動化腳本,就無需手動一次又一次地完成這些任務, 非常方便啊有木有?! 而在某種程度上,Python 就是自動化的代名詞。 今天就來和大家一起學習一下, 用 ...
  • 作者:IT王小二 博客:https://itwxe.com 前面小二介紹過使用Typora+PicGo+LskyPro打造舒適寫作環境,那時候需要使用水印功能,但是小二在升級LskyPro2.x版本發現有很多不如人意的東西,遂棄用LskyPro使用MinIO結合代碼實現自己需要的圖床功能,也適合以後 ...
  • OpenAI Gym是一款用於研發和比較強化學習演算法的工具包,本文主要介紹Gym模擬環境的功能和工具包的使用方法,並詳細介紹其中的經典控制問題中的倒立擺(CartPole-v0/1)問題。最後針對倒立擺問題如何建立控制模型並採用爬山演算法優化進行了介紹,並給出了相應的完整python代碼示例和解釋。要... ...
  • python爬蟲瀏覽器偽裝 #導入urllib.request模塊 import urllib.request #設置請求頭 headers=("User-Agent","Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, l ...
  • 前端代碼搭建 主要利用的是bootstrap3中js插件里的模態框版塊 <li><a href="" data-toggle="modal" data-target=".bs-example-modal-lg">修改密碼</a></li> <div class="modal fade bs-exam ...