携帯電話適応_html/css_WEB-ITnose-htmlチュートリアル-php.cn

携帯電話適応_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:57:53

オリジナル

1491 人が閲覧しました

今日はモバイル Web ページの適応について共有します。

背景

テクノロジーは絶えず発展しており、人々の生活も大きく変化しています。その重要な変化の 1 つはモバイルデバイスの変化です。携帯電話やタブレットは日常生活に欠かせないものになっているようです。携帯電話は通信機器として初めて人間の生活に登場しましたが、今日では携帯電話は単なる通信機器ではなく、生活にさらなる利便性をもたらすツールとなっています。継続は不可能です！携帯電話が非常に普及し、インターネットが普及した現在、インターネット製品の携帯電話市場は特に重要です。インターネット担当者は、より多くの携帯電話機能を実装する方法を検討する必要があります。 Web 開発はインターネット製品の大部分を占めており、モバイルデバイスにどのように適応するかは、Web フロントエンド開発エンジニアにとってもはや改善の余地ではなく、緊急の課題です。今日はモバイル Web アダプテーションについてお話します。

モバイル Web ページの適応は、その名のとおり、モバイルデバイス上で Web ページを完璧に表示する方法です。理解するのは簡単ですが、実際の状況は楽観的ではありません。現在、携帯電話は主に Android と iOS の 2 つのシステムが市場の大部分を占めています。以前は、iOS 携帯電話の解像度は比較的均一であり、出現以来フロントエンド開発に比較的容易に適応できました。 iPhone6 以降、Android 市場はさらに混沌としており、開発者は悲惨な状況に陥っています。通常、モバイル Web ページを作成する場合、デザイナーは複数のサイズのデザイン図面を設計しますが、これでは間違いなくデザイナーやフロントエンド開発エンジニアの作業負荷が増加しますが、それは役に立ちません。では、この厄介な状況を解決するにはどうすればよいでしょうか?

参考までに、私がこれを行った方法について簡単に説明します。これは最適な解決策ではないかもしれません。もっと良い方法がある場合は、私の WeChat 公式アカウントを追加して、共有することで進歩することもできます。本文の前に、目を休める美しい写真を載せておきます。

どうでしょう、美しい緑を見るとリラックスできますか？持っているかどうかに関係なく、本題に入りましょう。

最終効果

sass 変数を使用して、設計図のサイズと同じ大きさのスタイルを記述しますレム相対単位に自動的に変換され、さまざまなデバイスの適切なサイズに適応します。

まず、Web ページのルート要素、つまり html に font-size を設定する必要があります。後続の rem は、この font-size に基づいて要素の適切なサイズを計算します。次のコードを head タグに挿入すると、ページがレンダリングされた後に有効になります。このコードは html タグのフォントサイズを設定します (ここでは例としてデザイン幅 640px を使用します)

function setHtmlSize(){

var windowWidth = document.documentElement.clientWidth;

if(windowWidth > 800){

document.getElementsByTagName(" html")[0] .style.fontSize = 16 + "px";

}else{

var size = parseInt((document.documentElement.clientWidth / 640) * 20, 10 );

size % 2 != 0 && size--;

document.getElementsByTagName("html")[0].style.fontSize = size + "px";

}

function updateOrientation(){ //デバイスの回転は次のとおりです

var Orientation = window.orientation;

switch (方向) {