e起飞young
一个前端码农的技术博客
移动端适配方案及常用html头与初始化css整理
[ 2017/08/11 ]

使用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%;
}
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>

相关资料

有朋自远方来...评论一下呗O(∩_∩)O

  • 评论(4)

    蓝优 [ 回复 ] 2楼
    2018-12-02 06:55

    在这里学到了很多东西,谢谢大佬分享经验

    e起飞young 博主大人 [ 回复 ]
    2018-12-02 17:08

    @蓝优:没啥的,用到过就整理下

    That year 1997 [ 回复 ] 1楼
    2018-10-22 22:29

    哇    找到个大神博客   开心

    e起飞young 博主大人 [ 回复 ]
    2018-10-24 09:46

    @That year 1997:不大也不神哦,只是记录整理下自己遇到的问题。

    搜索