資訊專欄INFORMATION COLUMN
摘要：大家知道可以用來做響應(yīng)式布局，只是元素上的樣式需要根據(jù)屏幕寬度來指定。今天突然想到這個單位，發(fā)現(xiàn)用它來做響應(yīng)式布局實(shí)在太方便了。只需一行屏幕標(biāo)準(zhǔn)寬，全部寬度是，即也就是每像素。這個值也可根據(jù)自己需要調(diào)整數(shù)值。具體實(shí)現(xiàn)的完整代碼請參考
大家知道rem可以用來做響應(yīng)式布局，只是html元素上的font-size樣式需要根據(jù)屏幕寬度來指定。
之前有用@media媒體查詢，根據(jù)各種屏幕寬度寫html的樣式，也用過類似lib-flexible這樣的js庫動態(tài)改變html樣式，總覺得挺麻煩的。
今天突然想到vw這個單位，發(fā)現(xiàn)用它來做響應(yīng)式布局實(shí)在太方便了。
只需一行css：
html { font-size: 26.66667vw !important; }
屏幕標(biāo)準(zhǔn)寬375px，全部寬度是100vw，即：
100vw / 375px = 0.2666667 vw/px
也就是每像素0.2666667vw。為調(diào)試時便于換算，我們設(shè)定1rem = 100px, 即 1rem = 26.66667vw。這個值也可根據(jù)自己需要調(diào)整數(shù)值。
然后，我們在樣式中，就可以直接用rem了，做出來就是響應(yīng)式布局。
當(dāng)然如果你還想再方便點(diǎn)，也可以在css代碼里直接用px做單位，然后使用postcss-pxtorem這個工具在webpack構(gòu)建時將px轉(zhuǎn)為rem單位。這樣寫代碼時照著UI圖的標(biāo)注直接寫像素值就行了。配置如下：
{
loader: "postcss-loader",
options: {
plugins: [
require("postcss-pxtorem")({rootValue: 100, propList: ["*"]})
]
}
}
這個 rootValue: 100值，就是對應(yīng)上面的換算關(guān)系。如果你要調(diào)整的話，這里要一并調(diào)整。
具體實(shí)現(xiàn)的完整代碼請參考：https://github.com/hzsrc/vue-...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117031.html
摘要：當(dāng)媒介最大寬度為且是橫屏?xí)r里面的樣式生效目前前端開發(fā)項(xiàng)目類型可以分為兩種方式，和。這樣我們的響應(yīng)式網(wǎng)頁才完全生效了。移動端特點(diǎn)移動端特點(diǎn)沒有有沒有滾動條沒有沒有因?yàn)橐苿佣耸菦]有事件的所以當(dāng)我們在需要兼容移動端的頁面中應(yīng)該盡量少用事件。鄙人最近才剛剛開始學(xué)習(xí)一些關(guān)于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。 響應(yīng)式 什么是響應(yīng)式頁面呢？ 顧名思義響應(yīng)式頁面就是能做...
摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。 簡介 【目標(biāo)】：前端開發(fā)移動端及H5時候，不需要再關(guān)心移動設(shè)備的大小，只需要按照固定設(shè)計稿的px值布局！【基礎(chǔ)】 dpr（設(shè)備像素比）css的像素px不等于設(shè)備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設(shè)備無關(guān)，css的px需要乘dpr計算為設(shè)備像素； css3 的 rem，即ro...
摘要：屏幕可見的最大寬度高度。相對于當(dāng)前對象內(nèi)文本的字體尺寸。特點(diǎn)值并不固定會繼承父級元素的字體大小。所有未經(jīng)調(diào)整的瀏覽器都符合。相對于父元素相對于根元素視窗寬度?？梢晠^(qū)高度的和中較小的那個。一般情況之下，像素稱為與設(shè)備無關(guān)的像素，簡稱。 內(nèi)容 1.Iconfont 字體圖標(biāo)(阿里巴巴矢量字體圖標(biāo)庫)原理以及實(shí)現(xiàn) 2.Media媒體響應(yīng)式布局 3.Flex彈性盒子布局 4.移動端適配原理 r...
閱讀 3006·2023-04-26 02:04
閱讀 1306·2021-11-04 16:07
閱讀 3745·2021-09-22 15:09
閱讀 708·2019-08-30 15:54
閱讀 1931·2019-08-29 14:11
閱讀 2552·2019-08-26 12:19
閱讀 2283·2019-08-26 12:00
閱讀 790·2019-08-26 10:27
