モバイル WEB レイアウトのビデオチュートリアル

「モバイル WEB レイアウト ビデオ チュートリアル」では、モバイル Web 開発の基本、効率的な組版とレイアウト、モバイル Web の一般的な問題、端末のタッチ操作、さまざまなバグピットの解決方法などを紹介します。モバイル側に関して言えば、あらゆるサイズのモバイル デバイスが Android と iOS の構築を困難にするだけでなく、デバイスのサイズとブラウザの違いにより、フロントエンドの適応の問題について言及する必要があります。しかし、私たちは革命的なチームなので、問題が発生した場合には行動を起こさなければなりません。

コース再生アドレス: http://www.php.cn/course/428.html

先生の教え方:

先生の講義は鮮やかで、機知に富み、機知に富んでいます。 ,感動。鮮やかな比喩は最後の仕上げのようなもので、生徒に知恵への扉を開きます。適切に配置されたユーモアは、まろやかなワインを飲むように、人々に後味と郷愁を与え、哲学者の格言や文化への言及をもたらします。ナレーションの中に時々散りばめられ、人々に考えさせ、警告を与えます。

このビデオのさらに難しい点は、モバイルウェブの特殊なスタイル処理です:

高精細画像の問題

高精細画像は、私たちが通常持っている映画の高精細画像とは異なります。モバイル Web 用の高解像度画像のコンセプトは私のものです。この画像は非常に大きく、非常に鮮明なので、モバイル デバイスでも非常に鮮明に表示する必要があります。では、なぜ曖昧さが存在するのでしょうか?画像が 100px * 100px の場合、モバイル デバイスでは 100px * 100px として表示されます。そう考えれば問題ありません。

しかし考えてみましょう。Retina 画面では 1 ピクセルは 2 dp に等しいため、100px * 100px を使用すると、実際にはレンダリングに 200 dp * 200 dp の物理ピクセルを使用することになり、画像は拡大されてぼやけます。

モバイル Web ページで画像をレンダリングする場合、画像のぼやけを避けるために、画像の幅と高さを物理ピクセル単位でレンダリングする必要があります。つまり、100 * 100 の画像の場合、100 dp * 100 dp を使用する必要があります。 。

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

率直に言うと、高解像度の画面では、写真が 100*100 の場合、iPhone6 Plus で dpr が 2 より大きい場合は、50*50 ピクセルを使用してレンダリングする必要があります。このようにして dpr(3) を削除します。

ここでは、ソース コード リソースのダウンロードもお勧めします: http://www.php.cn/xiazai/code/2051

このビデオ コースウェアは全員と共有されます:

1 。モバイル WEB レイアウトのビデオチュートリアル

以上がモバイル WEB レイアウトのビデオチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。