寫移動端的兩種方法

2021-10-04 10:40:21 字數 1510 閱讀 5273

第一種:vw+rem法1.計算rem:確定移動端設計圖寬度width: 640px 750px 1080pxdpr: 2 2 3**: width:320px width:375px width:360px2.font-size為了方便計算,可以把html的font-size值 設定成100px;1rem=100px;100px是乙個固定值,沒辦法隨著裝置的改變而改變。能跟隨裝置發生改變vw 根據視口大小進行改變。100px == ?vw(vw代表百分比)若設計圖為750px, 則為100px=26.67vw3.然後按照要求寫**第二種:flxible.js外掛程式rem法1.計算流程引入flxible.js外掛程式 2:去掉html裡面預設的meta標籤flexible.js原理在頁面中引入flexible.js後,flexible會在標籤上增加乙個data-dpr屬性和font-size樣式(如下圖)。 為了方便計算可以設定成100px;//js首先會獲取裝置型號,然後根據不同裝置新增不同的data-dpr值,比如說1、2或者3,從原始碼中我們可以看到。注意:flexible.js外掛程式預設750px設計圖,若設計圖為640px,則要把flexible.js外掛程式源**中7.5改為6.4

flexible.js源**:

;(function(win, lib) );

if (metael)

} else if (flexibleel)

if (maximumdpr) }}

if (!dpr && !scale) else if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) else

} else

scale = 1 / dpr;

}docel.setattribute('data-dpr', dpr);

if (!metael) else

}function refreshrem()

var rem = width / 7.5;

docel.style.fontsize = rem + 'px';

flexible.rem = win.rem = rem;

}win.addeventlistener('resize', function() , false);

win.addeventlistener('pageshow', function(e)

}, false);

if (doc.readystate === 'complete') else , false);

}refreshrem();

flexible.dpr = win.dpr = dpr;

flexible.refreshrem = refreshrem;

flexible.rem2px = function(d)

return val;

}flexible.px2rem = function(d)

return val;

}})(window, window['lib'] || (window['lib'] = {}));

rem適配移動端js檔案 兩種方法

第一種方法 1.1引入js檔案 function win abort if browser does not support addeventlistener if doc.addeventlistener return win.addeventlistener resizeevt,recalc,f...

jeecms寫shell的兩種方法

某日同事說遇到乙個存在shiro反序列化的站點。此站點為jeecms,此站點不出網。首先jeecms的web目錄是不解析你上傳的jsp jspx檔案的應該是在web.xml檔案中做了限制。首先想到的是寫記憶體shell,因為之前遇到的這種情況就是這麼搞的。寫記憶體shell的話有下面兩款開源工具。此...

打包oracle客戶端的兩種方法

最近在專案中遇到了這樣乙個問題,如何將oracle客戶端打包到安裝程式裡直接安裝。這樣就不必單獨安裝oracle client啦 資料夾bin中放置必須的dll檔案和oracle.key檔案 必須 可以從安裝好的oracle的bin目錄中copy,目錄如下 資料夾admin中放檔案sqlnet.or...