html5中应用hotcss.js完成手机上端自兼容的方式

日期:2021-01-19 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

Html5网页页面在手机上端做自兼容是很普遍的技术性要求,下面详细介绍下在html网页页面应用hotcss

简介

应用动态性的HTML根字体样式尺寸和动态性的viewport scale。

遵照视觉效果1致性标准。在不一样尺寸的显示屏和不一样的机器设备像素密度下,让你的网页页面看起来是1样的。

1.新建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文档的,这时候大家必须1个 scss文档 即时编译程序器

vscode 编写器里边安裝软件

4.撰写编码

写个简易的html网页页面,內容以下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF⑻">
    <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'

走到这1步,就早已可以进行了自融入,在访问器中开启

到此这篇有关html5中应用hotcss.js完成手机上端自兼容的文章内容就详细介绍到这了,更多有关html5 hotcss.js 手机上端自兼容內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!