1.标明浏览器视窗
<meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
2.使用rem 或者em而不使用px
function auto(){ var width = $('body').width(); var font_size = 0.8+'rem';//设置默认字体大小 //var font_size2 = (width/320)*625+'%';//设置根节点字体大小 ps:默认根节点font-size:16*6.25 =100px var font_size2 = (width/320)*20+'px';//设置根节点字体大小 ps:默认根节点20px if (width>414) { font_size2= (414/320)*20+'px'; } $('body').css('font-size',font_size); $('html').css('font-size',font_size2); } auto(); window.onorientationchange = function() { auto(); }; window.onresize = function(){ auto(); };
3.媒体查询 在使用 bootstrap 等样式标准下一般已经帮我们做了 或者使用以下代码进行根font-size的设置
