你的位置:首页 > 网页设计

[网页设计]分享几种移动端标准头


1. rem单位方式,用法当前像素除以100。

<!doctype html><html><head>  <meta charset="utf-8" />  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />  <title>H5移动端</title>  <meta name="format-detection" content="telephone=no">  <link rel="stylesheet" type="text/css" href="static/css/public.css" />  <script>    (function (root) {      var docEl = document.documentElement,        timer = null,        width, last;      function changeRem () {        width = docEl.getBoundingClientRect().width;        if (last === width) { return; }        last = width;        root.rem = (width / 640) * 100;        if (/ZTE U930_TD/.test(navigator.userAgent)) {          root.rem = root.rem * 1.13;        }        docEl.style.fontSize = root.rem + 'px';      }      changeRem();      root.addEventListener('resize', function () {        clearTimeout(timer);        timer = setTimeout(changeRem, 300);      });      root.addEventListener('orientationchange', function () {        clearTimeout(timer);        timer = setTimeout(changeRem, 300);      });    })(window, undefined);  </script></head>

 

2. px单位方式,以640px设计图比例实现。

<!doctype html><html><head>  <meta charset="utf-8">  <meta name="format-detection" content="telephone=no" />  <title>H5移动端</title>  <link rel="stylesheet" type="text/css" href="static/css/public.css" />  <script>    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){      var version = parseFloat(RegExp.$1);      if(version > 2.3){        var phoneScale = parseInt(window.screen.width) / 640;        document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');      }else{        document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');      }    }else{      document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');    }    if(navigator.userAgent.indexOf('MicroMessenger') >= 0){      document.addEventListener('WeixinJSBridgeReady', function() {        //alert(1)        //WeixinJSBridge.call('hideToolbar');      });    }  </script></head>

 

3.px单位方式,以设计图640除以2实现。

<!doctype html><html ><head>  <meta charset="UTF-8">  <meta name="copyright" content="Tencent"/>  <meta name="keywords" content=""/>  <meta name="description" content=""/>  <meta name="author" content=""/>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta name="format-detection" content="telephone=no">  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="black">  <title>首页</title>  <link rel="stylesheet" href="css/public.css" />  <link rel="stylesheet" href="css/css.css" /></head>

 

4.px单位方式及media媒体查询方式实现,判断最大、最小方式实现,设计图还是640标准。

<!doctype html><html ><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width,user-scalable=no">  <meta name="apple-mobile-web-app-capable" content="yes" />  <meta name="apple-mobile-web-app-status-bar-style" content="black" />  <meta name="format-detection" content="telephone=no" />  <title>首页</title>  <link rel="stylesheet" href="css/public.css" /></head>

 注,第一种、二种方式是现在比较好用的