我开始设计网页，但我还是不明白这么好的媒体查询.我很困惑这样做.有没有任何网页，解释如何使用CSS或如果你能帮助我，我会很感激的步骤.我需要做这个网页响应桌面和移动的.因此，我需要创建一个名为“内容”的div，该div居中，最大桌面宽度为900px，并将占用100%的移动的空间。我需要使用中型查询来处理两种大小的桌面：宽度为900px或更大，移动的图像小于900px。（图像必须响应。）
ruarlubt1#
媒体查询类似于logical语句。
logical
“如果”这些事情是真的关于浏览器，使用CSS里面。所以你可以有像这样的东西你可以阅读更多关于here。使用响应网格时，可以使用
aiazj4mn2#
如果你对媒体查询不太适应，并且需要快速原型化，我的建议是使用bootstrap。Bootstrap将为不同的设备提供相应的渲染。您可以轻松地插入bootstrap文件并开始开发：请参阅有关如何使用bootstrap的链接和示例：http://getbootstrap.com/docs/4.0/examples/如果你想使用Css媒体查询，这将给予你一步一步的实现：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
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>
gjmwrych4#
尝试bootstrap容器流体。或者，试试Foundation。希望这些框架对你有帮助。
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; }
希望有帮助。
w8f9ii696#
您可以浏览Youtube，因为有大量的教程显示如何开发响应式网站。您可以从以下方面开始：W3Schools在W3Schools的教程中，它将提供您开始所需的信息，然后您可以建立这些信息。希望这对您有所帮助。
6条答案
按热度按时间ruarlubt1#
媒体查询类似于
logical语句。如果
“如果”这些事情是真的关于浏览器，使用CSS里面。
所以你可以有像
这样的东西
你可以阅读更多关于here。
使用响应网格时，可以使用
aiazj4mn2#
如果你对媒体查询不太适应，并且需要快速原型化，我的建议是使用bootstrap。Bootstrap将为不同的设备提供相应的渲染。
您可以轻松地插入bootstrap文件并开始开发：请参阅有关如何使用bootstrap的链接和示例：http://getbootstrap.com/docs/4.0/examples/
如果你想使用Css媒体查询，这将给予你一步一步的实现：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
wxclj1h53#
最好的方式来使用引导响应根据您的设备使用网格系统。
gjmwrych4#
尝试bootstrap容器流体。
或者，试试Foundation。希望这些框架对你有帮助。
093gszye5#
第一件事是在head标签中使用下面的代码：
您的网页代码：
对于响应式图像，请用途：
希望有帮助。
w8f9ii696#
您可以浏览Youtube，因为有大量的教程显示如何开发响应式网站。您可以从以下方面开始：W3Schools
在W3Schools的教程中，它将提供您开始所需的信息，然后您可以建立这些信息。希望这对您有所帮助。