px妙轉(zhuǎn)rem

verano 發(fā)布于2019-04-23 11:47 / 1346人閱讀

摘要：像素，相對(duì)長度單位，相對(duì)于顯示器屏幕的分辨率而言其實(shí)我個(gè)人認(rèn)為可以理解為固定單位這是個(gè)前端中的新成員，是中新增的一個(gè)相對(duì)單位。

px：像素，相對(duì)長度單位，相對(duì)于顯示器屏幕的分辨率而言（其實(shí)我個(gè)人認(rèn)為可以理解為固定單位）；

rem：這是個(gè)web前端中的新成員，是CSS3中新增的一個(gè)相對(duì)單位。相對(duì)的只是html根元素；

1、設(shè)定兩個(gè)盒子（舉例）

1     
2     <div class="box1">div>
3     <div class="box2">div>

2、簡單設(shè)定樣式（px形式）

 1     /* 分別以 px 為單位為兩個(gè)設(shè)置兩個(gè)簡單樣式 */
 2     .box1 {
 3         width: 50px;
 4         height: 100px;
 5         background-color: chartreuse;
 6     }
 7     .box2 {
 8         width: 200px;
 9         height: 125px;
10         background-color: aqua;
11     }

3、簡單設(shè)定樣式（px轉(zhuǎn)rem形式）

 1      /* 指定相對(duì)根元素的相對(duì)值 
 2        * 一般css樣式初始化時(shí)候指定
 3        * 值的指定一般是 50px 或 100px
 4        * 原因：便于計(jì)算
 5        * 計(jì)算公式：px / 相對(duì)值 = rem
 6        */
 7         html {
 8             /* 我這里指定 100px */
 9             font-size: 100px
10         }
11         .box1 {
12             width: .5rem;
13             height: 1rem;
14             background-color: chartreuse;
15         }
16         .box2 {
17             width: 2rem;
18             height: 1.25rem;
19             background-color: aqua;
20         }

4、兩種形式顯示基本一樣

云服務(wù)器 GPU云服務(wù)器 px2rem px rem html 0.1px

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1164.html

相關(guān)文章

Stylus插件開發(fā)教程

摘要：你還需安裝一個(gè)依賴，告訴使用者，你這個(gè)是基于哪個(gè)版本開發(fā)的，當(dāng)然你可以不安裝這個(gè)依賴，那只能自己用了。開發(fā)調(diào)試在根目錄中運(yùn)行在本機(jī)全局為做一個(gè)軟鏈接，如果你移動(dòng)了目錄你得重新做軟鏈接。因?yàn)槟阍谇懊嫣砑恿宋募聦?shí)上導(dǎo)入的文件是。由于Stylus的強(qiáng)大，它支持SCSS LESS 靈活的書寫方式，然后它不用像SCSS安裝Ruby，不是特別出名，流行的工具沒有使用它，只是在小的圈子里面挺火滴...

cyqian 2019-08-30 12:57 評(píng)論0 收藏0
最簡單的px轉(zhuǎn)rem預(yù)處理方法

摘要：如果你使用作為你的預(yù)處理的工具，那么是你使用最簡單處理轉(zhuǎn)工具，使用方法如此簡單首先安裝工具然后只要在你的文件引用就可以里工具將編譯成并預(yù)處理將轉(zhuǎn)換成上面內(nèi)容輸出為選擇使用和設(shè)置初始值默認(rèn)你可以設(shè)置它。 showImg(https://segmentfault.com/img/remote/1460000004847061); showImg(https://segmentfault.c...

Cristic 2019-08-30 12:57 評(píng)論0 收藏0
【基礎(chǔ)】EM 還是 REM？這是一個(gè)問題！

摘要：但問題是究竟該用還是呢關(guān)于這個(gè)問題一直存在比較大的爭議。上述現(xiàn)象的出現(xiàn)，是因?yàn)槭窍鄬?duì)于當(dāng)前元素字體的大小。什么是表示，它是相對(duì)于根元素的長度單位。還是在項(xiàng)目開發(fā)中究竟是選用還是一直以來爭議不斷。這就是前述規(guī)則中的第一條規(guī)則。簡言應(yīng)用象EM 和 REM這種相對(duì)長度單位進(jìn)行頁面排版是WEB開發(fā)中的最佳實(shí)踐。在頁面排版中較好應(yīng)用EM 和 REM，根據(jù)設(shè)備尺寸縮放顯示元素的大小。這就使得組...

lk20150415 2019-08-29 15:07 評(píng)論0 收藏0
WEB頁面實(shí)現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實(shí)現(xiàn)

摘要：頁面實(shí)現(xiàn)等比例縮放自適應(yīng)通過和實(shí)現(xiàn)一和簡介是相對(duì)長度單位，是指相對(duì)于根元素即元素字號(hào)大小的倍數(shù)。當(dāng)過大時(shí)，以其為基準(zhǔn)的數(shù)值會(huì)出現(xiàn)精度丟失，造成較大的誤差。此時(shí)，單位會(huì)以為基準(zhǔn)進(jìn)行計(jì)算，頁面就會(huì)整個(gè)跑偏。 WEB頁面實(shí)現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實(shí)現(xiàn) 一、rem 和 vw 簡介 1. rem rem 是相對(duì)長度單位，是指相對(duì)于根元素(即html元素)font-size...

pubdreamcc 2019-08-30 10:59 評(píng)論0 收藏0
WEB頁面實(shí)現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實(shí)現(xiàn)

摘要：頁面實(shí)現(xiàn)等比例縮放自適應(yīng)通過和實(shí)現(xiàn)一和簡介是相對(duì)長度單位，是指相對(duì)于根元素即元素字號(hào)大小的倍數(shù)。當(dāng)過大時(shí)，以其為基準(zhǔn)的數(shù)值會(huì)出現(xiàn)精度丟失，造成較大的誤差。此時(shí)，單位會(huì)以為基準(zhǔn)進(jìn)行計(jì)算，頁面就會(huì)整個(gè)跑偏。 WEB頁面實(shí)現(xiàn)等比例縮放自適應(yīng) - 通過 rem 和 vw 實(shí)現(xiàn) 一、rem 和 vw 簡介 1. rem rem 是相對(duì)長度單位，是指相對(duì)于根元素(即html元素)font-size...

khs1994 2019-08-02 15:09 評(píng)論0 收藏0