BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

html5でhotcss.jsを使い、携帯電話の自己適合を実現する方法

2022-01-27 10:45:45

Html5ページがモバイルで自己適応することは非常に一般的な技術要件であり、ここではhotcssをhtmlページで使用する方法について説明します。

はじめに

動的なHTMLルートのフォントサイズと動的なビューポートスケールを使用します。

視覚的一貫性の原則に従うこと。異なる画面サイズや異なるデバイスのピクセル密度でも、ページが同じように見えるようにしましょう。

1. 以下のディレクトリ構成で、新しいプロジェクトフォルダを作成します。

src // 主要なファイルはここにあります。
├──────────────────────────┘ hotcss.js
├─────────────────────┘ px2rem.less
├─ px2rem.scss
└──────────────────────┘ px2rem.styl

2. hotcss.js ファイルは公式でダウンロードできますが、素晴らしい GitHub (https://github.com/Grace110/hotcss) でデモ全体をダウンロードすることも可能です。

注意事項

hotcss.jsは他のJSがロードされる前にロードする必要があり、決して非同期にロードしてはいけません。

できれば、読み込み用の <head> タグ内に hotcss.js の内容をインラインで記述し、他の js ファイルよりも先に読み込むようにしてください。

余計なバグを避けるために、そのJSの前に読み込むCSSを配置する。

hotcss.jsは、<head>タグに直接コピーすることも可能です。

<ブロッククオート

<script>(function(window,document){var hotcss={};(function(){var viewportEl=document.querySelector('meta[name="viewport& quot;]'),hotcssEl=document.querySelector('meta[name="viewport& quot;'),var hotcss=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.HotCssEl. getAttribute("content");if(hotcssCon){var initialDprMatch=hotcssCon.match(/initial-dpr=([\d.] +)/);if(initialDprMatch){dpr=parseFloat(initialDprMatch[1])}var maxWidthMatch=hotcssCon.Matches(/initialDprMatch[1]) match(/max↘width=([\d .] +)/);if(maxWidthMatch){maxWidth=parseFloat(maxWidthMatch[1])}var designWidthMatch=hotcssCon.Match(maxWidthMatch[1]);if(maxWidthMatch[1]){maxWidth=parsefloat(maxWidthMatch[1]) 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.maxWidth=maxWidth}{document.documentElement.setAttribute("max-width",maxWidth);hotcss.maxWidth=dpr documentElement.setAttribute("design-width",designWidth);hotcss.maxWidth=maxWidth. designWidth=designWidth}var scale=1/dpr, content="width=device-width, initial-scale="+scale+", minimum-scale="+scale+", maximum-scale="+scale+& quot;, user-scalable=no";if(viewportEl){viewportEl. setAttribute("content",content)}else{viewportEl=document.createElement("meta");viewportEl.setAttribute("name","viewport");viewportEl.setAttribute("data");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.Px(px,10)*320};hotcss.mresize =function(){varインナーサイズ=direct(px,10)}ref(! 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.dpr}{document.dpr}{font size=( innerWidth*20)};hotcss.dpr}{font size=(innerWidth*20)/320+"px mresize();window.addEventListener(" resize",function(){clearTimeout(hotcss.tid);hotcss.tid=setTimeout(hotcss.mresize,33)},false);window.addEventListener(");window.addEventListener(");hotcss.tid=out(hotcss.tid)},false) addEventListener(" load",hotcss.mresize,false);setTimeout(function(){hotcss.mresize()},333);window.hotcss=hotcss})(window,document);</script&gt.WINDOWS.CO.LTD;

//pc2rem.scss ページコード 

@function px2rem( $px ){
    @return $px*320/$designWidth/20 + rem;
}
$designWidth : 750; //as designWidth is 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 in h5</title>
<! -- introduce the hot.scss file , or copy the js file directly here-->
    <script src="js/hotcss.js"></script>
    <! -- introduce css file, note, not scss -->
    <link rel="stylesheet" href="css/style.css"> 
</head>
<body>
    <div class="container">
        <div class="content">
            <p>hotcss in h5</p>
        </div>
    </div>
</body>
 
</html>

次に、scssのスタイルを記述します。

また、style.css を開くと、style.scss ファイル上のコンテンツがリアルタイムで style.css にコンパイルされていることがわかります'。

ここまで来ると、適応が完了し

この記事はhtml5でモバイル自己適応を実現するためにhotcss.jsを使用することについてのすべてです、より関連するhtml5 hotcss.js モバイル自己適応コンテンツは、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けて、あなたが将来的にもっとスクリプトハウスをサポートしてくれることを願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します