css 桌面和移动的的响应式网站

h79rfbju  于 2023-03-25  发布在  其他
关注(0)|答案(6)|浏览(96)

我开始设计网页,但我还是不明白这么好的媒体查询.我很困惑这样做.有没有任何网页,解释如何使用CSS或如果你能帮助我,我会很感激的步骤.我需要做这个网页响应桌面和移动的.
因此,我需要创建一个名为“内容”的div,该div居中,最大桌面宽度为900px,并将占用100%的移动的空间。
我需要使用中型查询来处理两种大小的桌面:宽度为900px或更大,移动的图像小于900px。(图像必须响应。)

ruarlubt

ruarlubt1#

媒体查询类似于logical语句。

如果

“如果”这些事情是真的关于浏览器,使用CSS里面。
所以你可以有像

这样的东西
你可以阅读更多关于here
使用响应网格时,可以使用

aiazj4mn

aiazj4mn2#

如果你对媒体查询不太适应,并且需要快速原型化,我的建议是使用bootstrap。Bootstrap将为不同的设备提供相应的渲染。
您可以轻松地插入bootstrap文件并开始开发:请参阅有关如何使用bootstrap的链接和示例:http://getbootstrap.com/docs/4.0/examples/
如果你想使用Css媒体查询,这将给予你一步一步的实现:https://www.w3schools.com/css/css_rwd_mediaqueries.asp

wxclj1h5

wxclj1h53#

最好的方式来使用引导响应根据您的设备使用网格系统。

<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>
gjmwrych

gjmwrych4#

尝试bootstrap容器流体。
或者,试试Foundation。希望这些框架对你有帮助。

093gszye

093gszye5#

第一件事是在head标签中使用下面的代码:

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

希望有帮助。

w8f9ii69

w8f9ii696#

您可以浏览Youtube,因为有大量的教程显示如何开发响应式网站。您可以从以下方面开始:W3Schools
在W3Schools的教程中,它将提供您开始所需的信息,然后您可以建立这些信息。希望这对您有所帮助。

相关问题