文章主要介紹了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 手機端自適配內容請搜尋以前的文章或繼續瀏覽下面的相關文章