自適應布局postcss px2rem

實現原理

自適應布局是前端一直都存在的問題，通常常用的技術有**查詢@media screen and (max-width:1366px)，還有rem布局，通過改變頁面根元素font-size大小來實現自適應布局。可是都逃不過要計算的命運。有沒有什麼方法繞過這些花花繞，就寫px也能實現自適應布局呢？答案是肯定的，有方案理論上就能實現，這樣一來無論是寫自適應專案，還是修改原有專案，都變得十分方便。下面看看webpack打包scss的過程：

首先瀏覽器是無法解析scss**的，在專案工程裡，通過webpack的loader將檔案打包成瀏覽器可執行的**。比如scss，首先載入到scss、sass檔案時，就會通過sass-loader打包成css，然後在通過css-loader打包，具體配置**如下：

通過這個可以想到，如果有乙個loader，能夠在這些css檔案打包前，將檔案裡面的px計算成rem，然後在進行解析，這樣就可以直接在頁面中使用px了。主角出場了postcss-px2rem，可實現這個功能，下面看看在vue中的具體配置

**分析（這段無需配置）

使用webpack新建vue專案時，已經安裝好了這個loader，在build資料夾下utils（配置loader的地方）面有這樣一段**

return 
}),sass: generateloaders('sass', ),
scss: generateloaders('sass'),
stylus: generateloaders('stylus'),
styl: generateloaders('stylus')
}

在generateloaders函式中有這樣一句usepostcss

const postcssloader = 
}const loaders = options.usepostcss ? [cssloader, postcssloader] : [cssloader]

然後在通過styleloaders構造rules格式的loader，所以我們只要把webpack.dev.conf.js跟webpack.prod.conf.js檔案中使用styleloaders函式的引數加乙個usepostcss：true就可以（預設就有）

exports.styleloaders = function (options) )
}  return output
}

配置檔案（報錯的話記得安裝postcss-px2rem），在vue-loader.conf.js配置一下，vue-loader轉換

module.exports = )],
}

最後一步，監聽視窗大小變化，動態設定font-size，定義乙個js檔案引入main.js中

// basesize 要跟vueloade配置的一樣
let basesize = 100
function setfontsize () 
// 初始化
setfontsize()
// 監聽視窗變化
window.onresize = function ()

注意：①不能將大小直接寫在vue檔案的style中

②無需轉換rem可以寫px或者px

自適應布局postcss px2rem

自適應布局

CSS布局自適應布局

右邊自適應左右布局 css左右自適應布局

自適應布局postcss px2rem

自適應布局

CSS布局 自適應布局

右邊自適應 左右布局 css左右自適應布局

相關推薦

CSS布局自適應布局

右邊自適應左右布局 css左右自適應布局