Question

我最近问了一个关于解决方案的问题，以及如何在ASP.NET Web应用程序中修复它。

通过我得到的一些答案，我发现媒体查询是个不错的去处。

我已经设置了我的CSS文档，如下所示：

@media only screen and (max-width: 640px) {
}

@media only screen and (min-width: 641px) and (max-width: 800px) {
}

@media only screen and (min-width: 801px) and (max-width: 1024px) {
}

@media only screen and (min-width: 1025px) {
}

我一直在1600x800开发，我想知道如何知道我需要将对象的大小更改为。我是否必须在较小的浏览器中再次开发应用程序，或者是否有更简单的方法。

HTML：

<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>

Answer 1

该方法与您在不使用媒体查询的情况下编写CSS时的方法基本相同。你仍然需要处理不同的窗口大小。

拖动窗口边缘以缩小浏览器
看看设计如何成立
调整CSS
刷新页面

Answer 2

您需要更改图片和字体的大小，并根据您使用媒体查询设置的不同屏幕尺寸更改其位置。要检查不同的代码，您可以调整窗口大小并拖动边框，看看效果是否有效。

并按照 ** @ Quentin ** 编写的步骤进行操作

Answer 3

这不是正确的方法。你应该用流畅的CSS布局网格开始你的网站，谷歌选择一个适合你的网站。这是一个流体网格的示例：http://onepcssgrid.mattimling.com/。

当您设置所有内容并进行设计时，请展开浏览器，当设计“＃34;中断”时，添加媒体查询断点。在开发之前决定你的断点并不是一个好主意。

测试设计的好工具可能是：http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random（在左上角的框中输入您的网址），但我通常更喜欢手动拉伸浏览器。

Answer 4

这是我在我的网站上所做的，它运作良好：

<head>
<meta name="viewport" content="width=device-width">
<style>
@media screen and (max-width:1900px)
{
    #content{
        margin-left:251px;
        margin-top: -197px;
    }
}
@media screen and (min-width: 420px) and (max-width: 1000px) {
    #sidebar {
        margin-left: -30px;

    }
    #content{
        margin-left:221px;
        margin-top: -197px;
    }

    #separator
    {
        height: 50px;
    }

}
</style>
</head>

我通过调整我的chrome窗口大小来检查它，然后相应地应用了宽度。希望它可以帮到你。

Answer 5

CSS Media查询是解决与使用不同大小的浏览器和设备相关的问题的最佳选择。您可以使用不同的工具检查您的应用程序，这些工具可以显示您的应用程序在不同设备和浏览器上的外观您可以通过重新调整浏览器窗口大小来检查，也可以使用浏览器扩展程序检查您的工作

谷歌浏览器
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
的火狐：
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
的歌剧：
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
的 Safari浏览器：
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html

要详细了解css媒体查询，请访问：http://letsdopractice.com/css-media-queries/

使用CSS媒体查询

5 个答案: