html5中使用hotcss.js实现手机端自适配的方法

HTML5页面在手机端做自适配是很常见的技术需求，下面介绍下在htML页面使用hotcss

简介

使用动态的HTML根字体大小和动态的viewport scale。

遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。

1.新建一个项目文件夹，目录结构如下图:

src //主要文件在这里@H_406_16@├── 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 手机端自适配内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！