主頁(yè) > 知識(shí)庫(kù) > html5中使用hotcss.js實(shí)現(xiàn)手機(jī)端自適配的方法

html5中使用hotcss.js實(shí)現(xiàn)手機(jī)端自適配的方法

熱門(mén)標(biāo)簽:機(jī)器人外呼系統(tǒng)存在哪些能力 南昌仁和怎么申請(qǐng)開(kāi)通400電話 平?jīng)龅貓D標(biāo)注位置怎么弄 如何獲取地圖標(biāo)注客戶 拓展地圖標(biāo)注 電話機(jī)器人電銷(xiāo)系統(tǒng)掙話費(fèi) 高德地圖標(biāo)注地點(diǎn)糾錯(cuò) 只辦理400電話 電話機(jī)器人黑斑馬免費(fèi)

Html5頁(yè)面在手機(jī)端做自適配是很常見(jiàn)的技術(shù)需求,下面介紹下在html頁(yè)面使用hotcss

簡(jiǎn)介

使用動(dòng)態(tài)的HTML根字體大小和動(dòng)態(tài)的viewport scale。

遵循視覺(jué)一致性原則。在不同大小的屏幕和不同的設(shè)備像素密度下,讓你的頁(yè)面看起來(lái)是一樣的。

1.新建一個(gè)項(xiàng)目文件夾,目錄結(jié)構(gòu)如下圖:

src //主要文件在這里
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl

2.hotcss.js 文件可以下載官方的,也可以在大神GitHub(https://github.com/Grace110/hotcss)上下載整個(gè)demo

注意:

hotcss.js必須在其他JS加載前加載,萬(wàn)不可異步加載。

如果可以,你應(yīng)將hotcss.js的內(nèi)容以內(nèi)嵌的方式寫(xiě)到<head>標(biāo)簽里面進(jìn)行加載,并且保證在其他js文件之前。

為了避免不必要的bug,請(qǐng)將CSS放到該JS之前加載。

hotcss.js也可以直接復(fù)制到<head>標(biāo)簽里面

<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 頁(yè)面代碼

@function px2rem( $px ){
    @return $px*320/$designWidth/20 + rem;
}
$designWidth : 750; //如設(shè)計(jì)圖是750

3.但是html是無(wú)法直接調(diào)用scss文件的,這時(shí)我們需要一個(gè) scss文件 實(shí)時(shí)編譯器

vscode 編輯器里面安裝插件

4.編寫(xiě)代碼

寫(xiě)個(gè)簡(jiǎn)單的html頁(yè)面,內(nèi)容如下

<!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文件直接復(fù)制到這里-->
    <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>

接下來(lái)寫(xiě)scss 樣式

同時(shí)打開(kāi)style.css,可以看到,style.scss文件上的內(nèi)容會(huì)實(shí)時(shí)編譯到style.css'

走到這一步,就已經(jīng)能夠完成了自適應(yīng),在瀏覽器中打開(kāi)

到此這篇關(guān)于html5中使用hotcss.js實(shí)現(xiàn)手機(jī)端自適配的文章就介紹到這了,更多相關(guān)html5 hotcss.js 手機(jī)端自適配內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

標(biāo)簽:永州 池州 西藏 漯河 青島 棗莊 新疆 遼源

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5中使用hotcss.js實(shí)現(xiàn)手機(jī)端自適配的方法》,本文關(guān)鍵詞  html5,中,使用,hotcss.js,實(shí)現(xiàn),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5中使用hotcss.js實(shí)現(xiàn)手機(jī)端自適配的方法》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于html5中使用hotcss.js實(shí)現(xiàn)手機(jī)端自適配的方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章