1. 首页
  2. 问答
  3. 针对桌面和移动设备的响应式网站

针对桌面和移动设备的响应式网站

2017-08-30 149 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

相关问题

 相关问题