Question

我正在找人指引我朝着正确的方向前进。我有一个功能性的网页，在我的13英寸MacBook上运行清晰。问题在于查看不同大小的网页以及元素如何变形。需要做些什么来确保它在任何屏幕上都看起来清晰美观在详细说明元素的高度和宽度时是否需要使用百分比，还是需要一些javascript。

我意识到这是广泛的，所有我正在寻找的是引导我走向应该改变的东西所以我可以让网站上线。

谢谢！

Answer 1

总体方向：

您想要查看media queries，以便将您的设计responsive设置为不同的观看媒体。您将需要考虑其他元标记，例如定义视口大小的元标记，但通常您可以使用CSS完成所有操作。

以下是可以为每个设备大小包装自定义CSS规则的示例查询：

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}

    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}

    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}

    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

显然，您需要根据需要填写CSS规则，以确保您的内容不会被破坏。

一个好的策略是为小型移动应用程序设计，然后从那里开始变大。这样你就不会发现自己想要塞进路。太。许多。进入一个小界面。

一般情况下，你也可以使用float:left;属性作为主要布局块（而不是绝对定位等）。当父元素太窄时，你的侧边栏等会漂浮在主内容的上方/下方并排。

另外，是的。您可以使用百分比等来流畅地填充区域。使用background-属性而不是<img>标记。希望有所帮助。

Answer 2

我猜你可以把bootstrap作为参考！

它具有响应性，并且在不同的分辨率屏幕上显示几乎相同！

所以尝试这样的事情。

如果您想让您的网站在所有屏幕上看起来都一样，请尝试使用precentage！（但不建议！）

Answer 3

响应式设计或流体设计需要css3-mediaqueries

我们可以根据stylesheets分配不同的browser window size。

您必须知道如何使用CSS Media Queries & Using Available Space

也可以去 What are CSS Media Queries and how to implement them.

我想不再编辑我的答案，但我有一些好点可以改变我的想法来自http://www.webmonkey.com/2011/06/tips-tricks-and-best-practices-for-responsive-design/

使用@media扩展任何屏幕的布局，但请记住   仅这一点并不是真正的响应式设计。



使用可容纳任何屏幕尺寸的液体布局。别   只需设计一个iPhone / Android外观，一个用于平板电脑和   一个用于桌面。保持液体，否则会发生什么   一些新的中间屏幕尺寸突然变得流行？



根据网站内容的细节滚动自己的网格。   罐装网格系统很少符合要求。这个问题   罐装网格是他们不适合您的独特内容。创建   内容的布局，而不是画布（或网格）。



从小处开始。从最小尺寸的屏幕开始，按照您的方式工作   向上，添加@media规则将浮动元素放入更大的窗口中   平板和桌面浏览器。从狭窄的单列开始   布局来处理移动浏览器，然后从那里扩展   而不是相反。



使用Respond或CSS3媒体查询JavaScript库   bootstrap @media查询支持旧版浏览器，但不支持   否则知道如何处理它。从最小的屏幕开始   并且向上工作意味着它是桌面浏览器所需要的   处理@media，确保旧浏览器使用polyfill工作   作出响应



忘记Photoshop，在浏览器中构建你的comps。这实际上是   不可能在Photoshop中模拟液体布局，从中开始   而不是浏览器。



使用img {max-width：100％; }。对于非常大的图像，   考虑使用像Responsive Images这样的东西来提供   最小的屏幕较小的图像下载然后使用JavaScript   交换较大的图像以获得更大的屏幕。



拥抱延迟加载。您的网站上可能有项目，辅助   内容很好，但不是必需的。加载该内容   主要内容加载完成后使用JavaScript。



忘记完美。即使有这些建议，你仍然是   将已禁用JavaScript的旧浏览器的用户排除在外。   如果他们看到移动布局，这些用户越来越少见   在他们的桌面上，猜猜看，这不是世界末日。您的   网站仍然完全可用。

网页设计流动性

3 个答案: