1. 首頁
  2. 問答
  3. 如何讓css設計響應？

如何讓css設計響應？

2017-07-17 83 views
-4

我有一個正確顯示一個屏幕分辨率的HTML頁面，但不適用於其他分辨率。我怎樣才能使這個頁面的CSS響應所有的解決方案？如何讓css設計響應？

來源

2017-07-17 idan

+0

好的問題，可能你應該查看一些關於響應和媒體查詢的網頁。 – bhansa

+1

歡迎來到SO，請閱讀如何提問的幫助部分。 –

+1

歡迎來到堆棧溢出！你的問題很廣泛，並且有很多關於這個主題的教程和文章。請閱讀[問]。重要短語：「搜索和研究」和「幫助他人重現問題」。 –

回答

1

您可以使用引導程序3.

從Bootstrap W3schools 瞭解它，它會幫助你做出響應的網頁有很大的緩解。

來源

2017-07-17 12:58:13

1

在您的HTML中保留<meta name="viewport" content="width=device-width, initial-scale=1">內部<head>標記。

現在在CSS文件中：對於不同的屏幕分辨率，使用@media screen and (max-width: <screen-width>px)。

如：

HTML：

<html> 
     <head> 
      <title>this is title</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1">   
     </head> 
     <body> 
      <div class="test"> 
      <!--do something--> 
      </div> 
     </body> 
    </html>

CSS：

.test{ 
background: red; 
width: 100%; 
height: 500px; 
} 

/*for screen width of 786px*/ 
@media screen and (max-width: 786px){ 
    .test{ 
    background: blue; 
    } 
} 

/*for screen width of 300px*/ 
@media screen and (max-width: 300px){ 
    .test{ 
    background: green; 
    } 
}

現在調整瀏覽器窗口，看到了響應效果。

來源

2017-07-17 13:04:31

相關問題

 相關問題