移動端自適應布局

一、前言

一般在做移動端過程中，常用的有rem布局、px轉rem工具的使用，本文將針對vue專案介紹一種px轉vw布局的實現方案。

本文所用腳手架為vue-cli搭建的，如何搭建請看作者的另一篇文章：  vue-cli3搭建vue專案

二、正文

要想實現px轉vw的自動轉化，需要在專案中自少引入如下4個依賴

1、使用npm安裝如下依賴

npm install postcss-import postcss-px-to-viewport postcss-url postcss-write-svg -d

該配置的官方說明文件，本文只列舉最簡單、且最實用的配置項

module.exports = ,

"postcss-import": {},
"postcss-url": {},
"postcss-write-svg": ,
// 官方說明文件 
"postcss-px-to-viewport": 
}}

rem自適應布局 移動端自適應必備

由於移動端特殊性，本文講的是如何使用rem 實現自適應 或叫rem 響應式布局，通過使用乙個指令碼就可以rem自適應 rem是相對於根元素 這樣就意味著，我們只需要在根元素確定乙個px字型大小，則可以來算出元素的寬高。1rem 16px 瀏覽器html的畫素，可以設定這個基準值 假如瀏覽器的html...

移動端webapp自適應布局

請看這篇 hcysunyang的blog 一篇真正教會你開發移動端頁面的文章 二 width device width 這段 是讓布局視口的尺寸等於理想視口。裝置畫素比 dpr 裝置畫素個數 理想視口畫素個數 device width function doc,win win.addeventlis...

移動端自適應rem布局

補充乙個基本知識，不許笑，1rem等於html中設定的字型大小 px 首先，html 的 head 部分中加入如下 initial scale 初始縮放比例，即當瀏覽器第一次載入頁面時的縮放比例。值為 1.0 即原始尺寸。maximum scale 允許瀏覽者縮放到的最大比例，一般設為1.0，即原始...