我的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
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...