tag rem

標籤
貢獻18
29
01:53 PM · Nov 21 ,2025
mosquito_612af76da10ff 頭像 gupan 頭像 lirong_60404fde6d52d 頭像 kobe_fans_zxc 頭像 buddhad666 頭像 wuyuanwuhuitianzhenwuxie 頭像 huitailangdeqingyu 頭像 freeman_tian 頭像 liu_namepea 頭像 crmeb 頭像 huitailangdeqingyu_620f185a1b3e3 頭像 tigerlaoshi 頭像

@rem / 博客 RSS 訂閱

crmeb 頭像

CRMEB - 數據大屏rem適配方案

一般來説，做PC端的頁面並不像移動端那樣對分辨率及屏幕大小有的特別強的要求，但是針對數據大屏這種展示型的頁面來説，就需要考慮適配的方案了，畢竟要儘可能的保證大部分的主流顯示器都能正常展示。 市面上大部分的顯示器幾乎都是16：9的尺寸，也就是1920 * 1080的分辨率。 理想中的效果 當屏幕的尺寸比例剛好是16：9時，頁面能剛好全屏展示，內容佔滿顯示器 當屏幕的尺寸比例小於16：9時，頁

rem

收藏 評論

lixiangyu 頭像

李祥雨 - vue-cli4創建vantUI項目，按需引入，適配Rem，自定義主題

使用vue-cli4創建一個vue項目 //vue-cli@4.2.3 vue create vant-demo 根據自己的需要選擇對應的配置，此處略過。。。 PS:因為vantUI使用的是less預處理器，配置時建議選擇此處理器。 安裝vantUI,按需引入 安裝vantUI npm i vant -S 按需引入 babel-plugin-import是一款 babel 插件，它會在編譯過

vue.js , vant , rem , vue-cli , Javascript

收藏 評論

xiaoemo_5df065196d684 頭像

LUYrty櫻花 - 移動WEB開發-rem適配佈局

移動web開發之rem佈局 rem 基礎 媒體查詢 Less 基礎 rem 適配方案 一、 rem基礎 1、rem單位 rem (root em)是一個相對單位，類似於em，em是父元素字體大小。 不同的是rem的基準是相對於html元素的字體大小。 rem的優勢：父元素文字大小可能不一致， 但是整個頁面只有一個html，可以很好來控制整個頁面的元素大小。 比如，根元素（ht

移動端適配 , rem , 前端 , html5

收藏 評論

suibichuanji_5900e1f5bcf67 頭像

itclanCoder - 簡單聊下rem與em的區別並如何做移動端適配

説一下rem 與 em 有什麼區別 rem 是基於 html 元素的字體大小來決定，而 em 則根據使用它的元素的大小決定,一般被稱為相對長度單位,是根據它父元素的字體大小來計算的，一般默認情況下：16px = 1em 如果父元素font-size:16px,子元素margin:0.8em。那麼得到的大小就是:0.8 * 16 =12.8。 當所有單位都採用em時，我們只需要改變body的font

移動端 , 移動端適配 , rem , Javascript

收藏 評論

diuren1205 頭像

diuren1205 - vue-cli3 lib-flexible+postcss-pxtorem 適配pc端大屏分辨率

vue-cli3腳手架 lib-flexible+postcss-pxtorem 適配pc端大屏分辨率 我的項目是cli3構建，iviewUI框架，UI設計稿是1920*1080 1.安裝lib-flexible postcss-pxtorem 插件 npm install lib-flexible postcss-pxtorem --save 2.在 main.js 文件中引入 import '

vue-cli3 , flexible , rem

收藏 評論

haiyangzhilan 頭像

海洋之藍 - vue2+vant2 使用rem進行瀏覽器適配

根據VANT官方説明，需要在項目中安裝兩個插件即可。 如果需要使用 rem 單位進行適配，推薦使用以下兩個工具： postcss-pxtorem 是一款 PostCSS 插件，用於將 px 單位轉化為 rem 單位 lib-flexible 用於設置 rem 基準值 但是昨天在安裝使用的時候，出了問題。提示錯誤，打開項目頁面也是空白了。於是百度了下，發現網絡上的文章都是抄襲。基本沒有解決問題，經

vue.js , vant , rem

收藏 評論

qifengliao_5e7f5b20ee3bd 頭像

起風了 - (移動端適配px轉rem)react配置rem插件lib-flexible和postcss-px2rem-exclude

1、安裝插件 yarn add lib-flexible postcss-px2rem-exclude //這個插件也要下，不然的話啓動項目的時候會報錯 yarn add react-app-rewire-postcss 2、修改config-overrides.js（如果沒有就新建，在項目根目錄） 在config-overrides.js文件裏重寫postcss，加入如下代碼 這文件將a

react , px2rem , rem , html5

收藏 評論

tigerlaoshi 頭像

Tiger老師 - [CSS]瞭解REM移動端適配方案

REM 是什麼 首先了解一下 CSS 中一些常見的長度單位： px 絕對長度單位，像素 注意：瀏覽器（Chrome）默認文字大小為 16px，所能設置的最小單位為 12px em 相對長度單位，這個單位表示元素的font-size的計算值。如果用在font-size 屬性本身，它會繼承父元素的font-size。 如果元素的 font-size 為 16px，元素的寬度設置為 widt

Css , 程序員 , rem , 前端

收藏 評論

huitailangdeqingyu_620f185a1b3e3 頭像

灰太狼的情與殤 - vue使用rem適配

1.開發環境 vue 2.電腦系統 windows10專業版 3.在使用vue開發移動端的過程中,我們會因為兼容性而頭疼,下面我來分享分享下面vue使用rem自適配,希望對你有所幫助。 4.廢話不多説,直接上操作: //安裝 postcss-pxtorem npm i postcss-pxtorem -S 5.在src目錄新建rem文件夾,下面新建rem.js,添加如下代碼: /

vue.js , rem

收藏 評論

mosquito_612af76da10ff 頭像

mosquito - 響應式rem適配方案

説起移動端適配，常常會想到rem,在這裏寫三種rem適配方案： 一、postcss-px2rem 1.安裝PostCSS-px2rem插件 使用npm或yarn安裝postcss-plugin-px2rem插件。在終端中運行以下命令： npm install --save-dev postcss-plugin-px2rem 或者 yarn add postcss-plugin-px2rem

響應式 , rem , 前端

收藏 評論

liu_namepea 頭像

我的名字豌豆 - 如何使用rem或viewport進行移動端適配?

 在開發移動端界面時，移動端適配一直是一個比較頭疼的事情，常見的移動端適配有viewport適配，rem適配，百分比適配等等，在這裏我們只介紹viewport適配和rem適配。看完這篇文章相信你應該會實戰操作移動端對於不同手機大小的適配問題了。 一：rem適配  rem是指相對於根元素的字體大小(font-size)的單位，根標籤的font-size=1rem。其可以稱作為相對單位，也就是説我們可

less , 移動端適配 , rem , viewport , 前端

收藏 評論

freeman_tian 頭像

freeman_Tian - Vue3基於 rem 比例H5縮放方案

hooks:於App.vue中引入並調用。會在頁面DOM結構最外層增加響應式的font-size屬性樣式更改。 1.接口和類型定義： DesignParms：設計稿參數的接口定義，包括寬度、高度和字體大小等信息。 UseRemOption：使用 rem 的配置參數的接口定義，包括延遲觸發時間。 Designs：設計稿集合的類型定義，是一個由 DesignParms 構成的數

vue-cli3 , rem

收藏 評論

huitailangdeqingyu 頭像

huitailangdeqingyu - vue使用rem適配

1.開發環境 vue 2.電腦系統 windows10專業版 3.在使用vue開發移動端的過程中,我們會因為兼容性而頭疼,下面我來分享分享下面vue使用rem自適配,希望對你有所幫助。 4.廢話不多説,直接上操作: //安裝 postcss-pxtorem npm i postcss-pxtorem -S 5.在src目錄新建rem文件夾,下面新建rem.js,添加如下代碼: /

vue.js , rem

收藏 評論

wuyuanwuhuitianzhenwuxie 頭像

VaporSpace - 深究移動端適配那些坑：小數像素、圖片模糊

一、適配方案的利弊 縮放 最早是直接用 px 來寫，然後用 meta 標籤裏的 scale 來縮放整個頁面，簡單粗暴。好處是簡單快速，壞處是不能控制部分樣式的縮放，一些邊框之類的在小屏會變得很細。據説早期天貓首頁就是這麼幹的。其實之後所有適配方案都是這個原理，在編碼的時候以設計稿為標準，到手機顯示時則根據不同機型的顯示寬度而縮放，只是縮放的技術不同。 rem 1rem 等於 html 的 fo

Css , img , rem , viewport

收藏 評論

buddhad666 頭像

buddha - pc端px轉換為rem針對屏幕分辨率進行頁面適配

常用的pc端網站適配方案是什麼？用的最多的大概就是父元素按照設計圖的寬度進行固定寬度，margin:0 auto居中，兩邊留白。但是有的設計圖不適合這樣兩邊留白的適配方案。 最近接手了一個pc端的項目，雖然按照常用的柵格佈局+postcss-pxtorem插件對px轉換的方法對頁面做了適配，使頁面無論在pc端打開還是在移動端打開都能自適應，但是在高清分辨率下的頁面比如5k高清，佈局還是有些亂了，這

Css , rem , HTML , Javascript

收藏 評論

kobe_fans_zxc 頭像

高級BUG開發 - 在 Vue 3 項目配置 rem

在 Vue 3 中配置 rem 時，設計稿1920，如果你希望實現一個最小寬度為 1024px 的適配，意思是當屏幕寬度小於 1024px 時不再縮小字體大小，始終保持最小寬度的 rem 配置。可以通過動態設置根元素的字體大小來實現。 一、安裝插件 pnpm install amfe-flexible --save 二、自定義方法 根目錄新建 utils/rem.js文件 (function ()

vue3 , rem , HTML

收藏 評論

lirong_60404fde6d52d 頭像

李不要熬夜 - 移動端rem 適配方案

rem是什麼？ rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的説它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素(rem)一個是依賴父元素計算(em)。 個人理解rem佈局可分為倆

rem響應式 , 程序員 , rem , 前端

收藏 評論

gupan 頭像

早飯君 - vue移動端 px2rem-loader與vux移動端組件庫樣式錯亂，應該使用postcss-plugin-px2rem完美解決

整了半天，還是不能用px2rem-loader這個組件，因為他沒有忽略範圍，要換postcss-plugin-px2rem 1、先npm 安裝postcss-plugin-px2rem插件 npm i postcss-plugin-px2rem --save -dev 2、找到與src同級目錄下的.postcssrc.js module.exports = { "plugins": {

vue.js , px2rem , vux , rem

收藏 評論