html5中使用hotcss.js实现手机端自适配的方法
html5页面在手机端做自适配是很常见的技术需求，下面介绍下在html页面使用hotcss
简介
使用动态的html根字体大小和动态的viewport scale。
遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。
1.新建一个项目文件夹，目录结构如下图:
src //主要文件在这里
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl
2.hotcss.js 文件可以下载官方的,也可以在大神github（https://github.com/grace110/hotcss）上下载整个demo
注意：
hotcss.js必须在其他js加载前加载，万不可异步加载。
如果可以，你应将hotcss.js的内容以内嵌的方式写到<head>标签里面进行加载，并且保证在其他js文件之前。
为了避免不必要的bug，请将css放到该js之前加载。
hotcss.js也可以直接复制到<head>标签里面
<script>(function(window,document){var hotcss={};(function(){var viewportel=document.queryselector('meta[name="viewport"]'),hotcssel=document.queryselector('meta[name="hotcss"]'),dpr=window.devicepixelratio||1,maxwidth=540,designwidth=0;dpr=dpr>=3?3:dpr>=2?2:1;if(hotcssel){var hotcsscon=hotcssel.getattribute("content");if(hotcsscon){var initialdprmatch=hotcsscon.match(/initial\-dpr=([\d\.]+)/);if(initialdprmatch){dpr=parsefloat(initialdprmatch[1])}var maxwidthmatch=hotcsscon.match(/max\-width=([\d\.]+)/);if(maxwidthmatch){maxwidth=parsefloat(maxwidthmatch[1])}var designwidthmatch=hotcsscon.match(/design\-width=([\d\.]+)/);if(designwidthmatch){designwidth=parsefloat(designwidthmatch[1])}}}document.documentelement.setattribute("data-dpr",dpr);hotcss.dpr=dpr;document.documentelement.setattribute("max-width",maxwidth);hotcss.maxwidth=maxwidth;if(designwidth){document.documentelement.setattribute("design-width",designwidth);hotcss.designwidth=designwidth}var scale=1/dpr,content="width=device-width, initial-scale="+scale+", minimum-scale="+scale+", maximum-scale="+scale+", user-scalable=no";if(viewportel){viewportel.setattribute("content",content)}else{viewportel=document.createelement("meta");viewportel.setattribute("name","viewport");viewportel.setattribute("content",content);document.head.appendchild(viewportel)}})();hotcss.px2rem=function(px,designwidth){if(!designwidth){designwidth=parseint(hotcss.designwidth,10)}return(parseint(px,10)*320)/designwidth/20};hotcss.rem2px=function(rem,designwidth){if(!designwidth){designwidth=parseint(hotcss.designwidth,10)}return(rem*20*designwidth)/320};hotcss.mresize=function(){var innerwidth=document.documentelement.getboundingclientrect().width||window.innerwidth;if(hotcss.maxwidth&&innerwidth/hotcss.dpr>hotcss.maxwidth){innerwidth=hotcss.maxwidth*hotcss.dpr}if(!innerwidth){return false}document.documentelement.style.fontsize=(innerwidth*20)/320+"px";hotcss.callback&&hotcss.callback()};hotcss.mresize();window.addeventlistener("resize",function(){cleartimeout(hotcss.tid);hotcss.tid=settimeout(hotcss.mresize,33)},false);window.addeventlistener("load",hotcss.mresize,false);settimeout(function(){hotcss.mresize()},333);window.hotcss=hotcss})(window,document);</script>
//pc2rem.scss 页面代码
@function px2rem( $px ){
@return $px*320/$designwidth/20 + rem;
}
$designwidth : 750; //如设计图是750
3.但是html是无法直接调用scss文件的，这时我们需要一个 scss文件 实时编译器
vscode 编辑器里面安装插件
4.编写代码
写个简单的html页面，内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>hotcss在h5中的使用</title>
<!-- 引入hot.scss文件 ，或者把js文件直接复制到这里-->
<script src="js/hotcss.js"></script>
<!-- 引入css文件，注意，不是scss -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="content">
<p>hotcss在h5中的使用</p>
</div>
</div>
</body>
</html>
接下来写scss 样式
同时打开style.css,可以看到，style.scss文件上的内容会实时编译到style.css'
走到这一步，就已经能够完成了自适应，在浏览器中打开
到此这篇关于html5中使用hotcss.js实现手机端自适配的文章就介绍到这了,更多相关html5 hotcss.js 手机端自适配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
上一篇： 教大家一些拍照好看的动作