一行css代碼輕松實現前端響應式布局（vw+rem）

piapia 發布于2019-08-30 15:54 / 684人閱讀

摘要：大家知道可以用來做響應式布局，只是元素上的樣式需要根據屏幕寬度來指定。今天突然想到這個單位，發現用它來做響應式布局實在太方便了。只需一行屏幕標準寬，全部寬度是，即也就是每像素。這個值也可根據自己需要調整數值。具體實現的完整代碼請參考

大家知道rem可以用來做響應式布局，只是html元素上的font-size樣式需要根據屏幕寬度來指定。

之前有用@media媒體查詢，根據各種屏幕寬度寫html的樣式，也用過類似lib-flexible這樣的js庫動態改變html樣式，總覺得挺麻煩的。

今天突然想到vw這個單位，發現用它來做響應式布局實在太方便了。

只需一行css：

html {  font-size: 26.66667vw !important; }

屏幕標準寬375px，全部寬度是100vw，即：

100vw / 375px = 0.2666667 vw/px

也就是每像素0.2666667vw。為調試時便于換算，我們設定1rem = 100px, 即 1rem = 26.66667vw。這個值也可根據自己需要調整數值。

然后，我們在樣式中，就可以直接用rem了，做出來就是響應式布局。

當然如果你還想再方便點，也可以在css代碼里直接用px做單位，然后使用postcss-pxtorem這個工具在webpack構建時將px轉為rem單位。這樣寫代碼時照著UI圖的標注直接寫像素值就行了。配置如下：

    {
        loader: "postcss-loader",
        options: {
            plugins: [
                require("postcss-pxtorem")({rootValue: 100, propList: ["*"]})
            ]
        }
    }

這個 rootValue: 100值，就是對應上面的換算關系。如果你要調整的話，這里要一并調整。

具體實現的完整代碼請參考：https://github.com/hzsrc/vue-...

云服務器 GPU云服務器 rem響應式響應式布局 asp如何響應式布局 html響應式導布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117031.html

Web移動端頁面 --響應式和動態REM

摘要：當媒介最大寬度為且是橫屏時里面的樣式生效目前前端開發項目類型可以分為兩種方式，和。這樣我們的響應式網頁才完全生效了。移動端特點移動端特點沒有有沒有滾動條沒有沒有因為移動端是沒有事件的所以當我們在需要兼容移動端的頁面中應該盡量少用事件。鄙人最近才剛剛開始學習一些關于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。響應式什么是響應式頁面呢？顧名思義響應式頁面就是能做...

BLUE 2019-04-23 13:44 評論0 收藏0
【技術】移動端適配 px2rem/px2vw 的原理與實現

摘要：不同的前端框架，配合等打包工具，可以更高效的使用這些插件，完成移動端適配的配置工作。簡介【目標】：前端開發移動端及H5時候，不需要再關心移動設備的大小，只需要按照固定設計稿的px值布局！【基礎】 dpr（設備像素比）css的像素px不等于設備像素/分辨率/各種值，css的px可以簡單理解為虛擬像素，與設備無關，css的px需要乘dpr計算為設備像素； css3 的 rem，即ro...

AlexTuan 2019-08-22 18:41 評論0 收藏0
前端—初級階段3(9-12)

摘要：屏幕可見的最大寬度高度。相對于當前對象內文本的字體尺寸。特點值并不固定會繼承父級元素的字體大小。所有未經調整的瀏覽器都符合。相對于父元素相對于根元素視窗寬度。可視區高度的和中較小的那個。一般情況之下，像素稱為與設備無關的像素，簡稱。內容 1.Iconfont 字體圖標(阿里巴巴矢量字體圖標庫)原理以及實現 2.Media媒體響應式布局 3.Flex彈性盒子布局 4.移動端適配原理 r...

rottengeek 2019-08-30 15:56 評論0 收藏0