From the first day I wrote the phone page has been bothering me the problem has two is the size of the adaptive font, one is the height of the adaptive page. I want to get a page job on a cell phone. Most people will come across this kind of problem.
I introduce a way to implement media queries do not say other direct code
<!doctype html>
<meta charset= "Utf-8" >
<title> Mobile Page </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= "This is my first mobile page" >
<meta name= "keywords" content= "mobile page" >
<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>
<body>
<div class= "Tab_nav" >
<ul>
<li><a href= "javascript:;" data-nav= "Tab_con_0" class= "on" > Overview </a></li>
<li><a href= "javascript:;" data-nav= "tab_con_1" > Features </a></li>
<li><a href= "javascript:;" data-nav= "Tab_con_2" >MIUI</a></li>
<li><a href= "javascript:;" data-nav= "tab_con_3" > Crafts </a></li>
</ul>
</div>
</body>
Questions about the font size of your phone's page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
