私のHTMLページを反応させるには？

-1

私はHTMLページを作成しました。私はそれを反応的にしたいと思います。私はw3schoolsを見てきましたが、それを反応的にする方法を見つけませんでした。私はちょうど私のHTMLページを反応させるには？

<meta name=viewport content="width=device-width, initial-scale=1">

の行を追加してきましたが、それはテキストが応答がありません。私は何かを追加しなければならないことを知っていますが、何が分かりません。

ここに私のコードです：

<!doctype html> 
<title>Test page</title> 
<head> 
    <meta name=viewport content="width=device-width, initial-scale=1"> 
    <style> 
     h1 { font-size: 50px; } 
     body { font: 20px Helvetica, sans-serif; color: #333; background: #eaeaea;text-align: center; padding: 150px;} 
     article { display: block; text-align: left; width: 650px; margin: 0 auto; } 
     a { color: #dc8100; text-decoration: none; } 
     a:hover { color: #333; text-decoration: none; } 
    </style> 
</head> 

<article> 
     <h1>This is a test page</h1> 
     <div> 
      <p> 
      Test page that I made for fun. I would like to be able to code. <a href="mailto:#">Send me an email (not working)</a></p> 
      <p>&mdash; Alessio</p> 
     </div> 
</article>

EDIT：

私はラインでこの行がなければ

<meta name=viewport content="width=device-width, initial-scale=1">

、モバイル上のテキスト全体のフィット感をプレイしてる瞬間デバイスが、非常に小さい。したがって、ページは画面に合わせてズームアウトされます。
この行では、テキストのサイズは適していますが、画面には適合しません。

私はテキストサイズを維持することができますが、画面の大きさに合わせて調整する必要があります。

私はライブラリを使いたくありません。私は可能な場合は、ページに直接コードを記述したいと思います。

EDIT 2： @elhampourと@gavgrifの提案に続いて、私はブートストラップをもっと調べました。私はfreecodecamp.comでコースをやっていますが、今私はこの提案についてもっと理解しています。コードは今、私はあなたが別のビューポートでのサイジングなどを変更するには、CSSメディアクエリを使用する必要がありますテキスト応答

出典

2016-05-14 Alessio

あなたはブートストラップフレームワークを使用することができます。これは最もよく知られているレスポンシブフレームワークです。また、最初に反応性について読むことをお勧めします。 http://getbootstrap.com/ – elhampour

を作るために

<!doctype html> 
<title>Coming Soon</title> 
<head> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
</head> 
<div class="container-fluid"> 
<h1 class="text-primary text-center">We&rsquo;ll be online soon!</h1> 
<img class="img-responsive col-sm-6 col-md-4 col-lg-3" src="https://livetogether.xyz/images/LT-header-alpha-flip.ico" alt="livetogether.xyz"> 
<p>If you need to you can always <a href="mailto:#">contact us</a>, we&rsquo;ll get back to you shortly!</p> 
<p>&mdash; LiveTogether Team</p> 
</div>

探していますされる瞬間。以下は、768px以上の画面では50pxサイズにH1を設定し、768pxで、または下のスクリーン用30pxする：

@media (max-width: 768px) { 
    h1 { font-size: 30px; } 
    } 

@media (min-width: 769px) { 
    h1 { font-size: 50px; } 
    }

@elhampourで述べたように - ブートストラップを調査して、あなたが同様にレイアウトを変更することができますサイズ等：

<div class="col-sm-6 col-md-4 col-lg-3"> 
    <p>test content 1</p> 
</div>

これはモバイル（COL-XS-）の完全なビューポートとして表示され、小さなビューポート（タブレット）、媒体ビューポート（ラップトップ）の第三の半値幅と四半期大きなビューポート（デスクトップ画面）の

出典

2016-05-14 05:20:51 gavgrif

正確に何を追加しますか？あなたの質問に次の回答がない場合は、私の質問にコメントしてください。

まず、htmlページはすでに応答しています。 divのサイズは、ページのサイズが変更されると変更されます。 https://plugins.jquery.com/textfill/

あなたが望むのであれば、文書のサイズが変更されたときに起動するイベントがjavascriptに存在する可能性があります。あなたの入力に基づいてあなたのページをカスタマイズします。これは、要素を個別に選択し、そのスタイルを設定することによって行われます。

また、ページが変更されると、CSSコードを変更することができます。調べてhttp://www.w3schools.com/css/css3_mediaqueries.asp

あなたのプロジェクトで幸運を祈って、良い一日を！

出典

2016-05-14 05:25:00

@ Evan_K2014ありがとうございました。私はライブラリを使用しないと考えていました。私はすでにw3.cssを使用しようとしましたが、そのファイルにすべてのコードを入れて、ページをモバイルにも見えるようにするために必要なスタイルを追加する方が好きです。 – Alessio

Dude ...モバイル上のページだけが必要な場合は、ブートストラップを使用してみてください（w3.schools.comにアクセスしてチュートリアルを使用するか、自分で作成してください）。デスクトップページからモバイルページを作成する魔法の方法はありません。各モバイルページは、モバイルCSSコードを使用するか、文字通り異なるコードを使用します。 –

それは私がしたいことですが、そのページのために私自身のコードを書いてください。しかし、それは非常に難しいかどうかわかりません。多分コードのいくつかの行が必要になると思った。私はすでにw3schools.comの文書を読んで、さまざまなソリューション（ライブラリw3.cssも使用しています）を試みましたが、私は自分自身でページのスタイルを設定したいと思います。。 – Alessio

私のHTMLページを反応させるには？

答えて

関連する問題