HTML5レスポンシブルウェブデザイン（CSS付き）

私はLynda.comのYouTubeのビデオの1つに従っていて、レスポンシブなデザインのウェブページを作成しています。一言で言えば、私は標準的なグローバルスタイル用と大きいサイズのスクリーン用の2つのCSSファイルを持っています。HTML5レスポンシブルウェブデザイン（CSS付き）

<!Doctype html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale = 1.0"/> 
    <title> Lynda.com | Creating a Responsive Web Design</title> 
    <link rel="stylesheet" type="text/css" href="first.css" /> 
    <link rel="stylesheet" type="text/css" href="firstLarge.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-depth:500px)" href ="firstSmall.css" /> 
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-depth:800px)" href ="firstMedium.css" /> 
    <!--[if lt IE 9]> 
     <script src - src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head>

これは私のhtmlファイルの始まりです。だから私が懸念して混乱しているのは、2番目のリンクrelラインです。クロムブラウザを展開すると、 "firstLarge.css"には何も適用されません。あたかもCSSが存在しないかのようです。

私はこの作業をどうやって行うのかちょっと混乱しています。どんな種類の助けも高く評価されます。ありがとうございました。

出典

2016-10-16 Henry Fok

ファイルの内容を見ることなく、何かを言うのはかなり不可能です。 – JJJ

... whats 'max-depth'？ – AA2992

@AnkithAmtangeそれをキャッチしてくれてありがとう。それはあなたにもありがとう幅であるはずです！ –

-1

レスポンシブなデザインでは、1000個のCSSシートでメディアクエリを検索する必要はありません。唯一のスタイルシートが必要なのは、ユーザーがWebサイトのモバイル版を上書きしてデスクトップ版を表示できるボタンがある場合です。

コンテンツが表示されたときにメディアのクエリを行うだけで、画面サイズを小さくすると1920px以上の大きな画面サイズにも対応します。

申し訳ありません申し訳ありませんが、私はあなたのための例をコードしますが、私の携帯電話の上にあります。

うまくいけば、それは役立ちます！

出典

2016-10-16 08:02:45 Allan

-1

あなたがUI開発者として初めての方は、CSSを習得することをお勧めします。メディアブレークポイントに注意する必要があります。

メディアクエリの使用方法については、以下のリンクを参照してください。

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

私は以下のように使用するための標準的なブレークポイントをお勧めします。

@media only screen and (min-width: 0) and (max-width: 480px) { 
    /* css for mobile */ 
} 

@media only screen and (min-width: 481) and (max-width: 766px) { 
    /* css for tablet */ 
}

出典

2016-10-16 08:15:31 Devang

ありがとうございました。私は自分自身の問題を解決した。おそらく私は昨夜疲れていたので、そんなに馬鹿げたものでした。 firstLarge.cssで使用したクラス名はfirst.htmlで一致しませんでした。

私はHTMLで <div class="informationContainer"> を使用し、 "firstLarge.css" に .information_container と呼ばれます。

ありがとう！

出典

2016-10-16 15:38:45

HTML5レスポンシブルウェブデザイン（CSS付き）

答えて

関連する問題