移动端CSS用rem为单位适应屏幕宽度 

 1 /*
 2  * 根据设备宽度调整字体大小
 3  * CSS中用rem作为单位
 4  */
 5 (function (doc, win) {
 6     var docEl = doc.documentElement,
 7     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 8     recalc = function () {
 9         var clientWidth = docEl.clientWidth;
10         if (!clientWidth) return;
11         window.mtSizeBase = 100 * (clientWidth / 720);
12         window.mtSizeBase = window.mtSizeBase>100?100:window.mtSizeBase;
13         window.mtSizeBase = window.mtSizeBase<45?45:window.mtSizeBase;
14         docEl.style.fontSize = window.mtSizeBase + 'px';
15     };
16     if (!doc.addEventListener) return;
17     win.addEventListener(resizeEvt, recalc, false);
18     doc.addEventListener('DOMContentLoaded', recalc, false);
19 })(document, window);
20 
21 /*
22  * 判断浏览器
23  */
24 var browser={
25     versions:function(){
26         var u = navigator.userAgent;
27         return {         //移动终端浏览器版本信息
28             weibo:u.toLowerCase().match(/Weibo/i)=="weibo",
29             micromessenger:u.toLowerCase().match(/MicroMessenger/i)=="micromessenger",          //是否是微信
30             mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
31             ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
32             android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
33             iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
34             iPad: u.indexOf('iPad') > -1, //是否iPad
35             isSAUMSUNG:u.indexOf('SAMSUNG')>-1,
36             isMomo:u.indexOf('momoWebView')>-1,
37             isApp:u.indexOf('haigou')>-1
38         };
39     }(),
40     language:(navigator.browserLanguage || navigator.language).toLowerCase()
41 };
42 
43 /*
44  * 返回键退出程序
45  * 1秒内，连续两次按返回键，则退出应用
46  */
47 function BackQuitApp() {
48     var backFirst = null;
49     this.QuitApp = function() {
50         //首次按键，提示‘再按一次退出应用’
51         if (!backFirst) {
52             backFirst = new Date().getTime();
53             mui.toast('再按一次退出应用程序');
54             setTimeout(function() {
55                 backFirst = null;
56             }, 1000);
57         } else {
58             if ((new Date()).getTime() - backFirst < 1000) {
59                 plus.runtime.quit();
60             }
61         }
62     }
63 };
View Code

 把上面代码另存为js文件，在页面中引入，然后把CSS中的所有单位改为rem，大小是原来px的1/100，如此一来，便可以适应各屏幕终端，应用于实际项目中，完美~~

posted @ 2016-02-25 15:36  Jenneyfan  阅读(212)  评论(0)    收藏  举报