2017-08-30 198 views
-1

我開始設計網頁,但我對媒體查詢的理解還不太瞭解。我很困惑這樣做。是否有任何網頁解釋如何在CSS中使用此步驟的步驟,或者如果您可以幫助我,我將不勝感激。我需要做這個網頁響應桌面和移動。針對桌面和移動設備的響應式網站

所以我需要創建一個名爲「內容」的中心,最大900px桌面寬度,並將佔用100%的移動。

我需要使用中等查詢來處理兩種尺寸的桌面:寬度爲900px或更多,移動的小於900px。 (圖片必須有響應。)

回答

0

您可以通過YouTube瀏覽,因爲有它展示瞭如何建立一個響應website.You可以尋找到這個開始教程的充足量:W3Schools

在從W3Schools的教程,它會提供你所需要的信息明星隨着,然後你建立起來。 希望這有助於。

0

根據您的設備使用引導程序來使用網格系統的最佳方式。

<div class="container-fluid"> 
<h1>Hello World!</h1> 
<p>Resize the browser window to see the effect.</p> 
<div class="row"> 
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm- 
4</div> 
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> 
</div> 
</div> 
0

只需在youtube上觀看來自新波士頓的所有視頻!

0

嘗試bootstrap容器流體。或者,嘗試Foundation。希望這些框架能夠幫助你。

0

開始與響應的第一件事是在頭標記使用下面的代碼:

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

代碼爲你的網頁:

<html> 
 
<head> 
 
<title>Web Page</title> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<style> 
 
* { 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing: border-box; 
 
} 
 
.content { 
 
    width: 900px; 
 
    margin: auto; 
 
    background: red; 
 
} 
 

 
@media screen and (max-width:768px) { 
 
    .wrapper { 
 
    padding: 15px; 
 
    } 
 
    .content{ 
 
    width: auto; 
 
    } 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="wrapper"> 
 
    <div class="content"> 
 
    ABC 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

對於敏感圖片使用:

img { 
    width: 100%; 
    height: auto; 
} 

希望它有幫助。

1

媒體查詢就像logical聲明。

如果

「如果」這些東西都是真實的關於瀏覽器,使用CSS裏面。

所以,你可以有這樣的事情, enter image description here

你可以閱讀更多關於它here

當使用響應網格,就可以使用, enter image description here

相關問題