Vue移動端螢幕適配

2021-09-25 09:17:02 字數 675 閱讀 3581

第一步：在src路徑下新建乙個js資料夾，在建立乙個resize.js檔案；

第二部：在resize.js檔案內寫入以下**、

(


function


(doc, win);if


(!doc.addeventlistener)


return


;//domcontentloaded是firefox下特有的event, 當所有dom解析完以後會觸發這個事件。


win.


addeventlistener


(resizeevt, recalc,


false);


doc.


addeventlistener


('domcontentloaded'


, recalc,


false);


})(document, window)


;
/*引入螢幕適配檔案*/


import


from


"../src/third-party plug-ins/resize"


;
說明：以上操作是為修改專案的根標籤的font-size：20px; 根據監聽螢幕的大小進行修改font-size的值。

移動端螢幕適配

rem單位介紹 rem font size of the root element 是相對長度單位。相對於根元素 即html元素 font size計算值的倍數 移動端主要根據iphone5來參考適配，在谷歌瀏覽器中，1rem 16px iphone5的寬度是320px,320 16 20 動態設定...

移動端螢幕適配

方法一 查詢 比如說我們設定了html，然後給具體的dom設定p，其實就相當於設定了p，也就是1rem 1 html的fontsize 2.5rem 2.5 html的fontsize html media only screen and min width 360px media only scr...

移動端螢幕適配 （ media ）

media screen and max width 300px media queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了media queries如何引用到專案中，但media queries有其自己的使用規則。具體來說,media q...