在HTML中的響應式設計

-5

我想製作一個網站，我正在使用「手風琴」作爲我的大屏幕設備（> 750像素）的設計，並且我想爲小設備使用不同的設計（常規按鈕）。我研究過如何將差異設計應用於不同的屏幕尺寸，但如果連我的html內容都不同，也不知道該怎麼做。任何人都可以請幫助我如何我的html語法應該爲這兩個不同的內容？在HTML中的響應式設計

來源

2016-07-04 Anish Raina

對不起，Stackoverflow不是一個免費的編碼服務，但是，有很多，很多很多關於如何開始使用html，css的教程和JavaScript。花費一些努力和時間來理解，但以這種方式學習是非常有益的！嘗試把一些時間放進去，並且遇到任何你總是被歡迎在這裏問的問題。 –

我已經在html css和Js上完成了許多在線課程，但是他們都沒有教會我使用響應式設計來改變html內容。他們只教會如何使用媒體查詢來改變CSS內容。 –

您可以使用媒體查詢將CSS規則調整爲不同的屏幕尺寸。

這是一個名爲「TestClass的」

@media screen and (max-width: 650px){ 
    .testClass{ 
       color: blue; 
    { 
}

來源

2016-07-04 11:25:47 Joonas89

是的，但假設我使用兩個div（一個用於手風琴，一個用於按鈕）。如何隱藏大屏幕設備上的按鈕，只顯示手風琴，只顯示小屏幕設備上的按鈕並隱藏手風琴。 –

您可以在媒體查詢中添加儘可能多的規則。您也可以進行多個媒體查詢 – Joonas89

如果你想不同的HTML，你可以做的是使兩個部分內容是basicly相同，但

@media screen and (min-width: 750px){ 
    .smallClass{ 
       display:none; 
    { 
    .bigClass{ 
       display:block; 
    { 
}

類的一個實例這樣它根據你的屏幕寬度在塊之間切換

來源

2016-07-04 11:29:14

這就是我一直在尋找的。非常感謝。 –

沒問題！希望它能幫助你完成你的其他項目。祝你好運。 –

在HTML中的響應式設計

回答

相關問題