手機自適應設計程式碼以及案例
阿新 • • 發佈：2019-02-16
手機自適應設計的三大根本：
一：允許網頁自動調整寬度
<meta name="viewport" content="width=device-width, initial-scale=1" /> 說明：viewport是網頁預設的寬度和高度，上面這行程式碼的意思是，網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%
二：不使用絕對寬度
CSS程式碼不能指定畫素寬度： width:xxx px; 只能指定百分比寬度： width: xx%;或者：width:auto;
三：使用相對大小的字型
body { font: normal 100% Helvetica, Arial, sans-serif; } 上面的程式碼指定，字型大小是頁面預設大小的100%
手機自適應實現的方法：
一：使用百分比
把標籤的寬度設定為百分比的樣式，如
img{width:100%;}二、不同尺寸的螢幕呼叫不同的css樣式
<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (max-width: 600px)"><!--小於600畫素時呼叫的樣式--> 三、使用css實現，根據螢幕寬度設定css樣式
@media screen and (min-width:371px) and (max-width:380px) {
.float_container .title_talk {font-size: 18px; background-size 四、使用 JS + CSS 來實現
JS案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"><!-- 允許網頁寬度自動調整 -->
<title>手機自適應測試網站</title>
</head>
<style>
ul,ol,li,dl{margin:0;padding:0;list-style-type:none;}
a{color:#333;text-decoration:none;}
body{font: normal 100% Helvetica, Arial, sans-serif;} /* 指定字型大小是頁面預設大小的100% */
.ztwrap{margin:0 auto;max-width:640px;min-width:320px;background:#fff;padding:0 0 0.5rem;}
.nav{width:100%;background:#005ea1;overflow:hidden;padding:0.2rem 0rem;}
.nav ul li {width:20%;color: #fff;float:left; text-align: center;}
.nav ul li a {font-size:30%;display: block; color: #fff;}
</style>
<body>
<div class="ztwrap">
<div class="nav">
<ul>
<li><a href="/">首頁</a></li>
<li><a href="/">內容頁</a></li>
<li><a href="/">內容頁</a></li>
<li><a href="/">內容頁</a></li>
<li><a href="/">內容頁</a></li>
</ul>
</div>
</div>
<!-- JS設定不同手機螢幕大小縮放比例 -->
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
// 一物理畫素在不同螢幕的顯示效果不一樣。要根據devicePixelRatio來修改meta標籤的scale,要註釋上面的meta標籤
(function(){
return;
var dpr = scale =1;
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他裝置下，仍舊使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
//
var metaEl = "";
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale +
', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
})();
})(document, window);
</script>
</body>
</html>手機端自適應小結：
手機端的HTML程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta name="wap-font-scale" content="no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>檔名</title>
<meta name="description" content="{$description}" />
<meta name="keywords" content="{$keywords}" />
<link type="text/css" rel="stylesheet" href="./css/XXX.css" />
<script src="./js/XXX.js"></script>
<base target="_blank"/>
</head>
<body>
<div class="ztwrap">
<!-- 這裡面是內容 -->
</div>
</body>
</html>CSS程式碼
@charset "utf-8";
/* CSS Document */
/* 去掉iPad iPhone input預設css樣式 */
input[type="submit"],
input[type="reset"],
input[type="button"],
button{-webkit-appearance:none;}
input,textarea{border:0;-webkit-appearance:none;}
/**手機通用樣式**/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,em{margin:0;padding:0;word-wrap:break-word;}
input, textarea, button, a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
html{background:#fff;color:#333333;font-family:Microsoft YaHei, Arial, Helvetica, Tahoma, Helvetica, SimHei,"微軟雅黑", sans-serif;}
ul,ol,li,dl{margin:0;padding:0;list-style-type:none;}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-size:100%;}
img,border{margin:0;border:0;font-size:0;}
.clear{clear:both;overflow:hidden;width:0px;height:0px;}
.clear2{clear:both;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover,a:active,a:focus,a:active{text-decoration:none;color:#1d64b1;}
img{border:0;vertical-align:middle;}
i,s,em{text-decoration:none;font-style:normal;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
a,button,input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;/* For some Androids */}
html{-webkit-text-size-adjust:none;}
img{border:0;vertical-align:middle;max-width:100%;height:auto;width:auto\9;-webkit-touch-callout:none;}
.red{color:#e10000;}
body{font: normal 100% Helvetica, Arial, sans-serif;}
/* 預設的div樣式 */
.ztwrap{
font-size:0.2rem;/* 設定div裡面預設字型的大小 */
overflow:hidden;margin:0 auto;max-width:640px;min-width:320px;background:#fff;padding:0 0 0.2rem;
-webkit-box-shadow:0px 0px 10px #bbbbbd;
-moz-box-shadow:0px 0px 10px #bbbbbd;
box-shadow:0px 0px 10px #bbbbbd;
/* For IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#bbbbbd')";
/* For IE 5.5 - 7 */
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135,
Color='#bbbbbd');}