2016-05-24 5 views
0

私は非常に基本的なモバイルウェブサイトをテストとして作成しようとしています。私は人々がこれをやり遂げる方法について考えてきました。私はどのCSSファイルが使用されるかを決めるウェブページのJavaScript関数onloadを使用すると仮定します。たとえば、これはモバイルウェブサイトを呼び出す方法ですか?

これは正しい一般的な考えですか、それとも別のやり方ですか?私の限られた知識のため

謝罪 - 私はそれはかなり基本的な質問

+1

Googleは何を言っていますか? –

+2

「レスポンシブデザイン」と「CSSメディアクエリ」が始まります。一般的に、特定のプラットフォームやブラウザでは「スニッフィング」しないでください。サイズ/デバイス(電話、タブレット、デスクトップ)ごとに異なる「カテゴリ」で機能するようにサイトを作成してください。完全に別々のスタイルシートを作成することも、単一のスタイルシート内でメディアクエリを使用することもできます。いずれの方法にも賛否両論があります。 – mc01

答えて

1

それは次のように行うことができますが、多くの近代的なウェブサイトがこれを行うにはbootstrapを使用して知っています。ブートストラップはモバイルデバイス上のページを再配置するようなことを行いますが、異なるCSSファイルを持たなくても、さまざまなデバイスに異なるレイアウトを指定することもできます。

grid systemをご覧ください。それはあなたが "シンプル"なウェブサイトに必要なものではないかもしれませんが、あなたが両方のデバイスのセットでそれを使用するのを見ているなら、あなたのウェブサイトを構築する方が簡単かもしれません。もっとここに

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

読む:あなたはメディアクエリを使用してlinkタグで異なる画面サイズをターゲットにすることができ

0

を、uがクラススタイル各画面の幅を変更することができます

@media (max-width:1024px) { 
    .body{color:red;} 
    } 

    @media (max-width:762px) { 
    .body{color:blue;} 
    } ​ 

    @media (max-width:640px) { 
    .body{color:orenge;} 
    } 
    @media (max-width:480px) { 
    .body{color:orenge;} 
    } 
    .body{color:orenge;} 
    @media (max-width:414px) { 
    .body{color:orenge;} 
    } 
    @media (max-width:375px) { 

    } 
関連する問題