使用rem布局（js动态改变根字体大小），兼容pc端，设计稿750px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述"/>
<!--360浏览器渲染模式优先级：极速/ie兼容/ie标准-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--ie8模拟专用：优先使用GCF渲染，否则使用最高版本的ie内核-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--禁止用户缩放-->
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<!--禁止自动识别邮箱、电话号码及地址-->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!--QQ浏览器私有-->
<meta name="x5-fullscreen" content="true"><!--全屏模式-->
<meta name="x5-orientation" content="portrait"><!--强制竖屏-->
<meta name="x5-page-mode" content="app"><!--应用模式-->
<!--UC浏览器私有-->
<meta name="full-screen" content="yes"><!--全屏模式-->
<meta name="screen-orientation" content="portrait"><!--强制竖屏-->
<meta name="browsermode" content="application"><!--应用模式-->
<!--360浏览器-->
<meta name="360-fullscreen" content="true"><!--全屏模式-->
<!--IOS私有：删除默认的苹果工具栏和菜单栏(即启用WebApp全屏模式)-->
<meta name="apple-mobile-web-app-title" content="添加至主屏幕后的标题">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<!--favicon icon-->
<link rel="shortcut icon" href="app/statics/images/icon/favicon.ico" type="image/x-icon"/>
<link rel="bookmark" href="app/statics/images/icon/favicon.ico" type="image/x-icon"/>
<!--ios icon-->
<!--如果不想系统对图标添加效果，则使用rel="apple-touch-icon-precomposed"-->
<link rel="apple-touch-icon" sizes="60x60" href="app/statics/images/icon/apple-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="app/statics/images/icon/apple-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="app/statics/images/icon/apple-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="app/statics/images/icon/apple-icon-152x152.png"/>
<!--css-->
<link rel="stylesheet" href="css/common.css" type="text/css">
<style id="mycss"></style>
<script>
(function(doc,win){
var docEl = doc.documentElement,
mycss = doc.getElementById("mycss"),
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var recalc = function(){
var width = docEl.clientWidth;
mycss.innerHTML = "";
if(width/dpr > 750){
width = 750 * dpr;
mycss.innerHTML = "body{width:750px;margin-right:auto!important;margin-left:auto!important;}";
}
docEl.dataset.width = width;
docEl.dataset.percent = 100 * (width / 750);
docEl.style.fontSize = 100 * (width / 750) + 'px';
};
recalc();
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt,recalc,false);
})(document,window);
</script>
<!--other js-->
</head>
相关文章：html头部常用<meta>整理
common.css
@charset "utf-8";
html{
/*rem基准值设置*/
font-size:100px;
line-height:1.14;
/*关闭纵横向模式调整字体大小功能*/
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
/* 禁止iOS微信内置浏览器调整字体大小 */
/* body {
-ms-text-size-adjust: none!important;
-webkit-text-size-adjust: none!important;
-moz-text-size-adjust: none!important;
text-size-adjust: none!important;
} */
body,html{-webkit-overflow-scrolling:touch}
/*去掉手指按下时出现的背景色*/
a,button,input,textarea,select{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/*去掉元素focus时的线框*/
:focus{outline:none;}
::-moz-focus-inner{border-color:transparent;}
/*不允许选中*/
a{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
-moz-user-focus:ignore;
-moz-user-input:disabled;
}
/**/
button,input[type=button],input[type=submit],input[type=reset]{cursor:pointer;}
button[disabled], html input[disabled]{cursor:default;}
/*去掉number上下小箭头*/
input[type="number"]{-moz-appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
/*去掉search小叉叉*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
/*去掉某些浏览器给的默认样式*/
input[type="text"],input[type="password"],
input[type="number"],input[type="search"],
input[type=button],input[type=submit],
input[type=reset],textarea{-webkit-appearance:none;}
/*让其border和padding在其盒内重绘，方便处理rem带来的某些误差*/
textarea,
input[type=text],
input[type=password],
input[type="number"]{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/*placeholder样式设置*/
::-webkit-input-placeholder{color:#ccc;}/*WebKit browsers*/
:-moz-placeholder{color:#ccc;}/*Mozilla Firefox 4 to 18*/
::-moz-placeholder{color:#ccc;}/*Mozilla Firefox 19+*/
:-ms-input-placeholder{color:#ccc;}/*Internet Explorer10+*/
/**/
*{padding:0;margin:0;}
ul,ol,li{list-style-type:none}
table{border-collapse:collapse;border-spacing:0}
img{border:0}
textarea{resize:none}
a{text-decoration:none;}
精简版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>title</title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述"/>
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1"/>
<meta name="format-detection" content="telephone=no,email=no,address=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<link rel="shortcut icon" href="app/statics/images/favicon.ico?ver=1128" type="image/x-icon"/>
<link rel="bookmark" href="app/statics/images/favicon.ico?ver=1128" type="image/x-icon"/>
<link rel="apple-touch-icon" href="app/statics/images/apple-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="app/statics/images/apple-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="app/statics/images/apple-icon-114x114.png"/>
<link rel="stylesheet" href="app/statics/css/common.css" type="text/css"/>
<link rel="stylesheet" href="app/statics/css/style.css" type="text/css"/>
<script>
(function(win,doc){
doc.head.appendChild(function(){
var style = doc.createElement('style');
style.id = "mycss";
return style;
}());
function initRem(){
var mycss,scale = doc.documentElement.clientWidth/750;
if(scale < 1){
mycss = 'html{font-size:'+scale*100+'px!important;}';
}else{
mycss = 'html{font-size:100px!important;}'
+'body{max-width:750px;margin:0 auto!important;}';
}
doc.getElementById("mycss").innerHTML = mycss;
}
initRem();
win.onresize = initRem;
})(window,document);
</script>
<!--other sth-->
</head>
禁止安卓机微信内置浏览器调整字体大小
(function () {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function () {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
});
}
})();
有朋自远方来...评论一下呗O(∩_∩)O