vue移動端響應式方案設計

2021-10-09 01:14:23 字數 510 閱讀 4819

**

style響應與頁面響應外掛程式兩個外掛程式

postcss-pxtorem、amfe-flexible
1、postcss-pxtorem 可以實現動態的將px轉為rem單位（px to rem）

//安裝

yarn add postcss-pxtorem --dev
使用vue cli建立的，在專案根目錄下有個postcss.config.js，開啟在裡面新增一下一行配置

//配置


plugins:


,'postcss-pxtorem'


:}
2、amfe-flexible 頁面響應式設計

//安裝


yarn add amfe-flexible


中引入import


'amfe-flexible'
這樣頁面上使用px單位了，在手機端可以自動適應。

移動端（響應式）

查詢 mdn stylesheet media max width 800px href example.css 複製 mobile first原則 響應式設計最好mobile first原則優先，不過pc first也可以，只不過現在一半以上的使用者都是用手機在訪問頁面 為實現響應式，可以根據不同...

移動端響應式布局

1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬 瀏覽器...

移動端與響應式

lang en charset utf 8 name viewport content width device width,initial scale 1.0,minimum scale 1.0,maximum scale 1.0,user scalable no documenttitle he...