css - 为不同屏幕尺寸构建网站的最佳实践

Question

构建网站的最佳做法是使用不同的屏幕尺寸进行编码，例如在调整浏览器大小时，或者甚至在查看为桌面浏览器尺寸（例如 800X600 或更大）设计的布局时。我更像是一个后端开发人员，现在，我必须构建一个我想使用 jquery mobile 的 Web 应用程序。我只希望桌面的布局也发生变化。到目前为止，我只知道媒体类型。有没有更好的解决方案，比如框架之类的东西。谢谢

Answer 1

您可以在 css 中使用客户端媒体查询来指定行为

@media-query(min-width:320px) { .do_not_show_on_small { display:none}

}

MDN 媒体查询信息

或使用服务器后端并查看用户代理并发送回不同的 html...

http://www.whatsmyuseragent.com/

然后是这样的服务器逻辑示例：

if (ff8) then
   send (browser_html.html)
else if (android os)
   sned (mobile_html.html)

（当然，这可能是使用模板引擎的相同数据的不同模板）。

Answer 2

在文件头上需要这些：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

这些是标准的媒体查询

/* #MEDIA QUERIES
================================================== */

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

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

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

祝你好运！检查我的网站，看看它是如何工作的：www.santz.net