談談對rem的理解和運用

2021-10-25 08:10:22 字數 1132 閱讀 2913

二、vue專案中怎麼使用rem

rem是乙個相對單位,是所有子元素相對於html元素的單位,之所以用它來寫移動端,就是因為所有元素的單位大小都可以隨著html元素去等比例縮放的

// 跟字型大小大小

html

p

這個例子其實就是想表達,rem是隨著html的跟字型大小大小去改變的,此時html跟字型大小大小是16,那麼1rem = 16px,如果再將html跟字型大小變為37.5,那麼此時的1rem = 37.5

rem是乙個相對單位,rem是根據根元素字型大小動態變化的,適配方案就是利用頁面寬度改變rem單位大小

這樣只按照設計稿設定尺寸,其他頁寬就跟著等比例改變。

頁寬改變=>根元素字型大小改變=>rem改變=>按rem設定的元素大小改變

如果設計師給你設計稿寬375,就相當於當頁面寬與設計稿一致時,1rem = 375px;

當頁面寬為460時,1rem = 460px;

這樣的話就可以用你設計稿的元素大小去除以460,得到的就是相對的單位畫素,從而達到效果

1.首先還是一樣index.html加視口標籤
"viewport" content=

"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"

>

2.npm i amfe-flexible(裡邊有封裝好的動態獲取跟字型大小,根據頁面大小,自動改變跟字型大小)
"amfe-flexible"

:"^2.2.1"

,

3.npm i postcss-pxtorem(將px單位自動轉化為rem)
"postcss-pxtorem"

:"^5.1.1"

,

4.新建postcss.config.js檔案(檔名不能變,目的是為了覆蓋webpack底層檔案)
module.exports =

,/* 設定樣式時 px 自動轉換為 rem */

'postcss-pxtorem':}

}

談談對MVC的理解

mvc是一種設計模式,它把應用程式拆分為模型物件,檢視物件,控制器物件三大部分.一.模型物件 模型物件封裝了應用程式的資料,模型物件更改時,會通知控制器物件,控制器物件更新相應的檢視物件.二 檢視物件 檢視物件應用程式中使用者所看得到的,其主要目的是顯示應用程式中模型物件的資料,在應用程式中,所有的...

談談對Spring IOC的理解

spring ioc 控制反轉,也叫依賴注入 di 控制反轉是一種思想,是將原來程式主導變為第三方主導,也就是容器主導,程式需要什麼,容器提供給程式,原來 是 程式需要a類,我們需要建立也就是new a 給程式,通過使用spring ioc 我們可以不用這麼寫,在配置檔案中進行配置便可以了,配置完成...

談談對jdbc的理解

jdbc是一種資料庫連線技術,可以用來對資料庫進行增刪改查等操作,本質上是sun公司定義的一系列介面,因為不同資料庫連線方式是不一樣的,同一段 沒有辦法使用不同的資料庫,所以sun公司定義了介面標準,具體由資料庫廠商來實現,要切換其他的資料庫,只要註冊廠商的驅動就可以使用,不用修改源 使用步驟 1....