关于移动适配方案，在网上我们经常看见网易和淘宝关于对移动WEB适配问题的解决方案的文章，有时候经常开发一些H5页面，经常要重写一下head，下面就是自己常用的html模板，配合sublime的cssrem，还是比较好用，简单记录一下，只为了方便自己用。

代码如下：

一、js实现自动计算适配方案

cssrem配置 

{
    
    "px_to_rem": 100,  // px转rem的单位比例，默认为40
    "max_rem_fraction_length": 4,  // px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css"]  //- 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
    <title>适配模板</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script>
    	(function(){
			var deviceWidth = document.documentElement.clientWidth;
			if(deviceWidth > 750) deviceWidth = 750;
			document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
		}())
    </script>
</head>
<body>
    
</body>
</html>

二、媒体查询方案

这是网易新闻使用的方法 


 /*
    750px设计稿
    取1rem=100px为参照，那么html元素的宽度就可以设置为width: 7.5rem，于是html的font-size=deviceWidth / 7.5
    100vw / 7.5
 */
html {
    font-size: 13.33333vw
} 
@media screen and (max-width:320px) {
	html {
	font-size:42.667px;
	font-size:13.33333vw
}
}@media screen and (min-width:321px) and (max-width:360px) {
	html {
	font-size:48px;
	font-size:13.33333vw
}
}@media screen and (min-width:361px) and (max-width:375px) {
	html {
	font-size:50px;
	font-size:13.33333vw
}
}@media screen and (min-width:376px) and (max-width:393px) {
	html {
	font-size:52.4px;
	font-size:13.33333vw
}
}@media screen and (min-width:394px) and (max-width:412px) {
	html {
	font-size:54.93px;
	font-size:13.33333vw
}
}@media screen and (min-width:413px) and (max-width:414px) {
	html {
	font-size:55.2px;
	font-size:13.33333vw
}
}@media screen and (min-width:415px) and (max-width:480px) {
	html {
	font-size:64px;
	font-size:13.33333vw
}
}@media screen and (min-width:481px) and (max-width:540px) {
	html {
	font-size:72px;
	font-size:13.33333vw
}
}@media screen and (min-width:541px) and (max-width:640px) {
	html {
	font-size:85.33px;
	font-size:13.33333vw
}
}@media screen and (min-width:641px) and (max-width:720px) {
	html {
	font-size:96px;
	font-size:13.33333vw
}
}@media screen and (min-width:721px) and (max-width:768px) {
	html {
	font-size:102.4px;
	font-size:13.33333vw
}
}@media screen and (min-width:769px) {
	html {
	font-size:102.4px;
	font-size:13.33333vw
}