アダプティブ モバイル ページの構築_html/css_WEB-ITnose

長年PCのWeb開発に携わってきましたが、モバイルページの開発が遅れていたため、当初はWeChatアプリを開発するために色々と補足をしましたが、デザイン案を正確に反映させるために、さまざまなサイズの携帯電話 まだわかりにくいので、いくつかの成熟した Web サイトから学び、私自身で簡単な方法を紹介したいと思います。

まず、ビューポートについて理解する必要があります。詳細は Apple の公式ドキュメントを読むことをお勧めします。一度読めば、理解する必要があることはすべて理解できます。

最初の解決策

html<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />

简便易行，适用情况：1. 网页设计仅针对手机屏幕，并且没有需要根据手机屏幕尺寸进行UI调整的内容，既没有媒体查询的CSS2. 产品层面可以不考虑非主流设备或浏览器的兼容性，例如黑莓的某些设备或搜狗浏览器这类的不支持640定宽渲染的浏览器3. 当手机横竖切换时，能够容忍部分手机在横屏浏览网页时，可能出现的问题(潜在问题)。

この解決策は、モバイル ブラウザに 640 の比率に従って Web ページをレンダリングさせ、ブラウザにサイズ調整を行わせることです。この解決策は実際には非常に優れており、ほとんどのシナリオでサポートできると思います。さらに、開発が簡単かつ効率的であり、さまざまなサイズやスタイル シートの単位変換の問題を考慮する必要がありません。

テスト アドレス: ここをクリックしてください。この Web ページは 640 の固定幅で作成されており、ほとんどのサイズの Web ページに適応できます。

2 番目のオプション

html<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

上記のほとんどの有名な Web サイトは説明する必要はありません。ただし、画像とフォントを適応させるには、単位として rem を使用し、JavaScript を有効にして画面の幅を決定し、HTML 要素のフォントサイズを動的に変更するのが一般的です。

計算を容易にするために、通常、HTML のフォントサイズは 100px に設定されています。これは、たとえば、Web ページのフォントが 16px の場合、0.16rem と記述するだけで済みます。デザイン案が幅640に従ってデザインされている場合は、カット描画時に完全にデザイン案に従って単位変換が行われ、100/x = 640/の比率に従って画面幅が取得されます。 documentWidth を使用すると、HTML のフォント サイズを計算できます。もちろん、水平および垂直の画面切り替えを防止するには、window.resize イベントを追加する必要があります。

第二种方案有几个弊端： 1. 由于背景图片无法做缩放，(background-size:cover|contain)只能针对单张图片，而对于sprite css image无力解决，所以这里要求如果有背景图，全部制作成单张的，然后再加上background-size:cover|contain，这里凸显出使用css font的好处了... 2. 页面中的所有单位都需要用rem来计算，虽然 X/100是很简单的计算，但是书写的时候还是让人厌烦。 3.如果有图片必须指定宽度，不然图片会按原始宽度进行渲染，当屏幕尺寸与设计预期尺寸不一致时，就会出错了。

上記の説明に基づいて、次の 2 つのツールを作成しました:
1. 作成時の単位として引き続き px を使用し、watch プラグインを通じて CSS ファイルの変更を監視し、px2rem を動的に変換します。
2. grunt-sprite と同様に、画像に基づいて自動変換 CSS アイコン ファイルを生成しますが、画像を合成するのではなく、対応する CSS のみを生成するため、以前の CSS スプライト ツールによって生成された画像を単一の画像に切り替えることができます。 image ICONを低コストで

開発アイデアは次のとおりです:
1. 開発中にディレクトリを区別する たとえば、src はソースコードを表し、dest ディレクトリは変換された静的ファイルを表します。その場合、CSS は依然としてピクセルを単位として使用します。
2. grunt または gulp プラグインを使用してファイルの変更を監視し、コピー、同期などの処理を実行します。同時に、設定された比率に従って css 内の px が rem に変換されます。
3. インライン スタイルは Web ページに直接埋め込むことができません。または、埋め込む前に自分で単位を変換する必要があります。

リスニングスクリプト:
(注: これは、開発中の幅が 640、デフォルトのフォントが 32 ピクセルであることを前提としています)

javascript// 根据屏幕宽度适配字体大小$(window).on('resize', function () {  var width = document.documentElement.clientWidth;  $('html').css('font-size', (width / 640 * 32) + 'px');}).triggerHandler('resize');

テストアドレス: ここをクリックしてください

(私のプロジェクトは grunt を使用しているため、プラグインを次のように記述します) gulp を使用する場合は、上記のツールを自分で実装する必要があります)

概要

最初の固定幅開発ソリューションは、実際には、プロモーション ページを作成するのに非常に適しています。さまざまなツールを使用して、開発の複雑さを軽減します。
2 番目のオプションは、ほとんどのサイズのブラウザに適応する必要があるプロジェクトに適しています。同時に、パッケージ化ツールが適切に構成されていれば、難易度が大幅に軽減され、開発とデプロイメントが分離され、開発コードがより明確になります。