1. 首頁
  2. 問答
  3. 針對桌面和移動設備的響應式網站

針對桌面和移動設備的響應式網站

2017-08-30 127 views
-1

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

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

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

來源

2017-08-30 Raw

回答

0

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

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

來源

2017-08-30 04:49:44 Amal

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>

來源

2017-08-30 04:57:03

0

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

來源

2017-08-30 05:01:26

0

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

來源

2017-08-30 05:41:18

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; 
}

希望它有幫助。

來源

2017-08-30 05:57:03

1

媒體查詢就像logical聲明。

如果

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

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

你可以閱讀更多關於它here。

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

來源

2017-08-30 06:59:04 Hash

相關問題

 相關問題