我的Vue之旅、03 CSS響應式相對單位(em,rem,vw,vh)

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

REM rem是一個相對尺寸,它相對於html根元素來進行計算 類推3REM為48px。改變html根元素 font-size 屬性的大小。那麼REM值也會隨之改變。 html{ font-size: 50px; /* 預設 16px */ } 此時3REM為150px。接下來我們通過一個小案例來演 ...


REM

rem是一個相對尺寸,它相對於html根元素來進行計算

image-20220921225424114

類推3REM為48px。改變html根元素 font-size 屬性的大小。那麼REM值也會隨之改變。

html{
    font-size: 50px;  /* 預設 16px */
}

此時3REM為150px。接下來我們通過一個小案例來演示。f-size使用了text css類

html {
  font-size: 16px;
}

.text {
  font-size: 1rem;
}

image-20220921225909068

修改類選擇器 .text 的font-size為2rem後。可以看到f-size隨之變大了。

image-20220921225942914

讓我們在做一次修改,可以看到 40 * 2 = 80px。

html {
  font-size: 40px;
}

.text {
  font-size: 2rem;
}

image-20220921230045132

REM 主要應用在響應式佈局網頁中。什麼是響應式佈局?能夠根據視窗大小動態變化佈局的網頁就是響應式。

將用到px的地方替換成rem單位。通過媒體查詢Media Quires的方式改變HTML根節點 font-size 的大小。

我的Vue之旅、04 CSS媒體查詢完全指南(Media Quires) - 小能日記 - 博客園 (cnblogs.com)

讓我們用該篇文章的使用案例①來實現。將font-size統一改成rem單位,並修改媒體查詢。

#size {
  // ....
  font-size: 2rem;
}

@media screen and (max-width: $desktop) {
  .container {
    background-color: $color-4;
  }

  // 新添加的
  html {
    font-size: 30px;
  }
}

@media screen and (max-width: $laptop) {
  .container {
    background-color: $color-3;
  }

  html {
    font-size: 20px;
  }
}

@media screen and (max-width: $tablet) {
  .container {
    background-color: $color-2;
  }

  html {
    font-size: 15px;
  }
}

@media screen and (max-width : $mobile) {
  .container {
    background-color: $color-1;
  }

  html {
    font-size: 10px;
  }
}

改變視窗寬度,明顯看到字體大小被改變。

image-20220922165227939

  • 電腦屏,2 rem * 30px = 60px;
  • 筆記本, 2 rem * 20px = 40px;
  • 平板屏,2 rem * 15px = 30px;
  • 手機屏, 2 rem * 10px = 20px;

EM

EM 單元與 REM 單元相同,但它取決於父字體大小,可以理解成離它最近的font-size大小。

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
}

image-20220922165516680

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
  padding: 3em;
}

image-20220922165539059

padding計算依賴離它最近的font-size大小。即 16px * 3em *em = 144px;

不推薦使用em

  • 很有可能犯計算錯誤
  • 您必須在媒體查詢中編寫大量代碼,使網站在所有屏幕尺寸上響應

VW

視口寬度,以百分比方式工作。10vw相當於當前瀏覽器視窗屏幕寬度的10%。

.text {
  display: none;
}

.box {
  width: 50vw;
  
  height: 300px;
}

image-20220922170034783

即使我們調整瀏覽器視窗大小,該元素寬度始終等於屏幕寬度的50%。

image-20220922170132149

VH

視口高度,以百分比方式工作。10vw相當於當前瀏覽器視窗屏幕高度的10%。

.text {
  display: none;
}

.box {
  width: 300px;
  
  height: 50vh;
}

image-20220922170217233

即使我們調整瀏覽器視窗大小,該元素高度始終等於屏幕高度的50%。

image-20220922170228539


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

-Advertisement-
Play Games
更多相關文章
  • 7月28日,在袋鼠雲2022產品發佈會上,袋鼠雲技術負責人思樞正式宣佈旗下產品「大數據基礎平臺EasyMR」發佈。 EasyMR是袋鼠雲自研的大數據基礎平臺,提供Hadoop、Hive、Spark、Trino、HBase、Kafka等組件,完全相容Apache開源生態;支持企業級安全管控,一鍵開啟L ...
  • 日常開發我們對一條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] ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...