如何使我的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>

編輯：

目前我正在玩線

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

沒有這一行，整個文本適合在移動設備，但非常小。所以頁面縮小以適應屏幕。
隨着線條，文字是一個很好的大小，但它不適合屏幕。

我需要的東西，以便我可以保持文本大小，但使其適合取決於屏幕尺寸。

我不想使用庫。我想直接在頁面中編寫代碼（如果可能的話）。

編輯2：繼@elhampour和@gavgrif的建議我已經調查了更多的bootstrap。我正在freecodecamp.com上學習一門課程，現在我對這個建議有了更多的瞭解。目前的代碼是

<!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>

現在我希望做響應

來源

2016-05-14 Alessio

你可以使用引導框架，它是最知名的響應框架，也是我建議你先閱讀有關響應第一。 http://getbootstrap.com/ – elhampour

您需要使用媒體查詢在你的CSS改變膠料等不同的視口的文本。下面將設置H1到屏幕上一個50像素的規模以上768px和等於或低於768px至30像素的屏幕：

@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-）的全部視口，小的視口（片），一介質視口（膝上型）的第三寬度的一半和四分之一更大的視口（descktop屏幕）。

來源

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頁面響應？

回答

相關問題