从我第一天写手机页面的时候一直困扰我的问题有两个 一个是自适应字体的大小，一个是自适应页面的高度。我想接到一个手机的页面任务 大部分人都会碰到这种问题
我这介绍一种实现的办法媒体查询 不说别的直接贴代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">
<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">
<meta name="description" content="这是我的第一个手机页面">
<meta name="keywords" content="手机页面">
<style>
body,h1,h2,h3,p,dl,dd,ol,ul,th,td,form,fieldset,input,button,textarea{margin:0;padding:0}
html{-webkit-text-size-adjust:none;word-wrap:break-word}
h1,h2,h3{font-size:100%}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;font-size:inherit}
fieldset,img{border:0}
cite,em,s,i,b{font-style:normal}
input,button,textarea,select{font-size:100%}
body,input,button,textarea,select,option{font-size:normal}
a,input,textarea{text-decoration:none;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li,img,label,input{vertical-align:middle}
var{font-style:normal}
ins{text-decoration:none}
body{font-size:20px}
.tab_nav ul{overflow:hidden;border-bottom:1px solid #efefef;border-top:.5em solid #f4f4f4}
.tab_nav li{float:left;width:25%}
.tab_nav li a{font-size:1.3em;line-height:3em;display:block;color:#333;text-align:center}
.tab_nav li a.on{color:#f60}
.tab_nav li:last-child a{border:0}
@media only screen and (max-width:300px){body{font-size:8.333px}}
@media only screen and (max-width:310px) and (min-width:300px){body{font-size:8.333px}}
@media only screen and (max-width:360px) and (min-width:320px){body{font-size:8.889px}}
@media only screen and (max-width:480px) and (min-width:350px){body{font-size:10px}}
@media only screen and (max-width:560px) and (min-width:470px){body{font-size:13.333px}}
@media only screen and (max-width:640px) and (min-width:560px){body{font-size:15.833px}}
@media only screen and (max-width:710px) and (min-width:630px){body{font-size:17.778px}}
</style>
</head>
<body>
<div class="tab_nav">
<ul>
<li><a href="javascript:;" data-nav="tab_con_0" class="on">概述</a></li>
<li><a href="javascript:;" data-nav="tab_con_1">功能</a></li>
<li><a href="javascript:;" data-nav="tab_con_2">MIUI</a></li>
<li><a href="javascript:;" data-nav="tab_con_3">工艺</a></li>
</ul>
</div>
</body>
</html>