<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable ...

我們通常在寫移動端頁面時，往往都會在html頁面中加入這樣一段話 可能我們只知道這三個字段的含義（視口寬度等於設備寬度，屏幕縮放為1，禁止用戶縮放），但是為什么要這么寫，其原理又是什么呢？ 我們先看一個簡單的demo吧。 該demo展示一個寬度為320px的div ...

在移動端web開發過程中，如果你對邊框設置border：1px，會發現，邊框在某些手機機型上面顯示的1px比實際感覺會變粗，這也就是1像素問題。如下圖是對桌面瀏覽器和移動端border設置1px的比較。那么是什么導致這種原因的呢？ 一、1px像素產生原因 首先，我們先對物理像素，設備獨立 ...

此插件適用於vue項目移動端適配問題 注：此方法本人只在vue-cli2.x中驗證過，vue-cli3.x的暫不知，如有不符，請參考其他答案。 第一步：安裝插件 第二步：找到 .postcssrc.js 　 第三步：在.postcssrc.js中配置如下代碼 截止 ...

一般我們做vue移動端項目使用的長度單位是rem、em，需要根據設計稿寬度進行計算，而這個插件可以配置相應屬性直接按照原始設計稿長度進行構建，不需要繁瑣的單位換算。 安裝： npm install postcss-px-to-viewport --save 安裝完成后在vue ...

本篇說明使用viewport做適配的步驟，rem適配請看vue中實現移動端viewport完美適配vant。 移動端項目主要是根據屏幕大小來動態設置元素的尺寸，需要在項目中安裝兩個模塊：postcss-px-to-viewport。 vant組件官方說明：https ...

1，先看看網上關於移動端適配講解 再聊移動端頁面適配，rem和vw適配方案！ 基礎點：rem相對根節點字體的大小。所以不用px; 根字體：字體的大小px; px：你就當成cm(厘米)這樣的東西吧； 基准：750設計稿； 這是方案的基礎理論，在這個基礎上，我們還要搞明白，到底要干一件什么事情 ...

一、px與視口 1.像素：一個像素表示了計算機屏幕所能顯示的最小區域，分為css像素（css中使用的一個抽象單位）和物理像素（只與設備的硬件密度有關） 2.視口--理想視口（理想的布局視口、在移動設備中指設備的分辨率===>給定設備物理像素的情況下，最佳的布局視口）1css 像素 ...