徹底弄懂響應式設計中的em和rem

前一陣子在響應式開發中遇到了em和rem的問題,也上網搜過一些文章,篇幅很長,也沒有仔細看,今天來總結一下。

?

rem是指:根元素(root element,html)的字體大小,

em是指:父元素的字體大小。

下面看一個例子:

  

div{
font-size: 30px;
}
div span{
font-size: 2em;
}<div>
div下的元素
<span>span里的元素</span>
</div>

  在chrome中顯示:

也就是說,span里的文字大小是根據父元素div的font-size大小設置的。

測試rem的代碼和運行結果就不貼上來了

body{

  font-size:16px;

}

p{

  font-size:2rem;/*此時p元素中的文字size為32px;

}

可以設置body的font-size為62.5%,也就是10px(比如瀏覽器默認字體大小16px),1.3rem=13 px,計算方便點;

?

注:可以引入 CSS 預處理工具(Sass、LESS 、Stylus等)自動計算 rem 值。

文章為原創,轉載請注明出處,謝謝

?

轉載于:https://www.cnblogs.com/gagag/p/6080500.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/253960.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/253960.shtml
英文地址,請注明出處:http://en.pswp.cn/news/253960.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JAVA字符串

字符串 1. 字符串 1.1 字符串概述和特點 java.lang.String類代表字符串。 API當中說&#xff1a;Java 程序中的所有字符串字面值&#xff08;如 "abc" &#xff09;都作為此類的實例實現。 其實就是說&#xff1a;程序當中所有的雙引號字符串&#xff0c;都是String類…

21分鐘 MySQL 入門教程

轉自 21分鐘 MySQL 入門教程 一、MySQL的相關概念介紹二、Windows下MySQL的配置配置步驟MySQL服務的啟動、停止與卸載三、MySQL腳本的基本組成四、MySQL中的數據類型五、使用MySQL數據庫登錄到MySQL創建一個數據庫選擇所要操作的數據庫創建數據庫表六、操作MySQL數據庫向表中插…

node-sass報錯解決方法

node-sass報錯解決方法 node-sass報錯解決方法 在Vue.js中&#xff0c;每一個vue文件都是一個組件&#xff0c;在.vue文件中可以將模板&#xff0c;腳本&#xff0c;樣式寫在一起&#xff0c;便于組織整個組件。在使用template&#xff0c;script時&#xff0c;編寫css樣式時&a…

微軟人工智能愿景:根植于研發 寄望于“對話”

過去25年來&#xff0c;微軟公司持續投入人工智能的發展愿景。現在&#xff0c;借助全新發布的聊天機器人Zo、Cortana Decices SDK和智能套件、以及擴展智能工具&#xff0c;這一愿景即將成為現實。12月13日&#xff0c;在舊金山的一次小聚會上&#xff0c;微軟全球執行副總裁、…

H264 TS/ES

http://blog.csdn.net/heanyu/article/details/6229724

Java中Semaphore(信號量) 數據庫連接池

計數信號量用來控制同時訪問某個特定資源的操作數或同時執行某個指定操作的數量 A counting semaphore.Conceptually, a semaphore maintains a set of permits. Each acquire blocks if necessary until a permit is available, and then takes it. Each release adds a permi…

Visual Studio for Mac Preview離線下載安裝

Visual Studio for Mac離線下載安裝。 環境&#xff1a;OS X EI Caption 10.11.2 .NET Core SDK 1.1 需預先安裝 .NET Core 1.1 SDK macOS版下載地址:https://go.microsoft.com/fwlink/?LinkID835011 安裝SDK需先安裝openssl。 brew update brew install openssl mkdir -p /us…

LOAM_velodyne學習(一)

在研讀了論文及開源代碼后&#xff0c;對LOAM的一些理解做一個整理。 文章&#xff1a;Low-drift and real-time lidar odometry and mapping 開源代碼&#xff1a;https://github.com/daobilige-su/loam_velodyne 系統概述 LOAM的整體思想就是將復雜的SLAM問題分為&#x…

實戰Vue簡易項目(2)定制開發環境

本章內容包含上一章思考的解決&#xff0c;還有一些其它的定制... CSS預處理 關于對.vue文件模塊處理規則的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟蹤&#xff1b; 而loaders的關鍵在于build/vue-loader.conf.js文件…

LINUX framebuffer

http://wangshh03.blog.163.com/blog/static/49103415201001231317484/ 一、FrameBuffer的原理 FrameBuffer 是出現在 2.2.xx 內核當中的一種驅動程序接口。 Linux是工作在保護模式下&#xff0c;所以用戶態進程是無法象DOS那樣使用顯卡BIOS里提供的中斷調用來實現直接寫屏&…

[POI2007]POW-The Flood

題目描述 給定一張地勢圖&#xff0c;所有的點都被水淹沒&#xff0c;現在有一些關鍵點&#xff0c;要求放最少的水泵使所有關鍵點的水都被抽干 輸入輸出格式 輸入格式&#xff1a; In the first line of the standard input there are two integers and , separated by a sin…

LOAM_velodyne學習(二)

LaserOdometry 這一模塊&#xff08;節點&#xff09;主要功能是&#xff1a;進行點云數據配準&#xff0c;完成運動估計 利用ScanRegistration中提取到的特征點&#xff0c;建立相鄰時間點云數據之間的關聯&#xff0c;由此推斷lidar的運動。我們依舊從主函數開始&#xff1…

戶外穿越

晚上很早就睡了&#xff0c;并且&#xff0c;太過激動&#xff0c;所以早上四點五十分就被驚醒&#xff0c;然后到早上鬧鐘響。 早上匆匆忙吃過早餐&#xff0c;就趕去坐車&#xff0c;到登山之前&#xff0c;坐了大巴車&#xff0c;又坐了景區的車&#xff0c;景區的路是山路十…

【oracle】關于創建表時用default指定默認值的坑

剛開始學create table的時候沒注意&#xff0c;學到后面發現可以指定默認值。于是寫了如下語句&#xff1a; 當我查詢的時候發現&#xff0c;查出來的結果是這樣的。。 很納悶有沒有&#xff0c;我明明指定默認值了呀&#xff0c;為什么創建出來的表還是空的呢&#xff1f;又跑…

Makefile中用宏定義進行條件編譯(gcc -D)/在Makefile中進行宏定義-D

在源代碼里面如果這樣是定義的&#xff1a; #ifdef MACRONAME //可選代碼 #endif 那在makefile里面 gcc -D MACRONAMEMACRODEF 或者 gcc -D MACRONAME 這樣就定義了預處理宏&#xff0c;編譯的時候可選代碼就會被編譯進去了。 對于GCC編譯器&#xff0c;有如下選項&…

python安裝與配置

首先下載python地址&#xff1a; https://www.python.org/downloads/release/python-361/下載頁面中有多個版本&#xff1a; web-based installer 是需要通過聯網完成安裝的 executable installer 是可執行文件(*.exe)方式安裝 embeddable zip file 嵌入式版本&#xff0c;可…

[OpenGL ES 03]3D變換:模型,視圖,投影與Viewport

[OpenGL ES 03]3D變換&#xff1a;模型&#xff0c;視圖&#xff0c;投影與Viewport 羅朝輝 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商業用途-保持一致”創作公用協議 系列文章&#xff1a;[OpenGL ES 01]OpenGL ES之初體驗[OpenGL ES 02]OpenGL ES渲染管線與著色器…

LOAM_velodyne學習(三)

終于到第三個模塊了&#xff0c;我們先來回顧下之前的工作&#xff1a;點云數據進來后&#xff0c;經過前兩個節點的處理可以完成一個完整但粗糙的里程計&#xff0c;可以概略地估計出Lidar的相對運動。如果不受任何測量噪聲的影響&#xff0c;這個運動估計的結果足夠精確&…

監控視頻線種類 視頻信號傳輸介紹及各種視頻接口的傳輸距離

一.視頻信號接口 監控視頻線種類介紹&#xff1a; 按照材料區分有SYV及SYWV兩種&#xff0c;絕緣層的物理材料結構不同&#xff0c;SYV是實心聚乙烯電纜&#xff0c;SYWV是高物理發泡電纜&#xff0c;物理發泡電纜傳輸性能優于聚乙烯。 S--同軸電纜 Y--聚乙烯 V--聚氯乙烯 W…

免費節假日API 更新新功能了 新增農歷信息返回

感謝大家對免費節假日API的支持.最近看了別家的api于是增加了一些新功能即獲取日期的農歷信息. 這個新功能還處于測試階段如有問題歡迎反饋 檢查一個日期是詳細信息 https://tool.bitefu.net/jiari/?d20180101&info1 返回值 {"status": 1,"type": 1,…