私は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>— Alessio</p>
</div>
</article>
EDIT:
私はラインでこの行がなければ
<meta name=viewport content="width=device-width, initial-scale=1">
- 、モバイル上のテキスト全体のフィット感をプレイしてる瞬間デバイスが、非常に小さい。したがって、ページは画面に合わせてズームアウトされます。
- この行では、テキストのサイズは適していますが、画面には適合しません。
私はテキストサイズを維持することができますが、画面の大きさに合わせて調整する必要があります。
私はライブラリを使いたくありません。私は可能な場合は、ページに直接コードを記述したいと思います。
EDIT 2: @elhampourと@gavgrifの提案に続いて、私はブートストラップをもっと調べました。私はfreecodecamp.comでコースをやっていますが、今私はこの提案についてもっと理解しています。コードは今、私はあなたが別のビューポートでのサイジングなどを変更するには、CSSメディアクエリを使用する必要がありますテキスト応答
あなたはブートストラップフレームワークを使用することができます。これは最もよく知られているレスポンシブフレームワークです。また、最初に反応性について読むことをお勧めします。 http://getbootstrap.com/ – elhampour