针对不同屏幕尺寸构建网站的最佳做法

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

来源

2013-05-20 Noor

只是谷歌响应布局。有很多框架可以帮助你。 [a]（http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design）[b]（http://learn.shayhowe.com/advanced-html-css/responsive-网页设计） –

哦，是啊...并且谈论框架，我使用并且更喜欢其余的Skeleton 1.2（纯CSS）。这很棒，我一直在用我的所有项目都没有问题。（www.getskeleton.com） –

@Santz，它可以用于jQuery的移动？ – Noor

既可以使用客户端中的CSS媒体的查询来指定行为

@媒体查询（最小宽度：320像素）{ .do_not_show_on_small {显示：无}

}

MDN Media Query Info

或使用服务器后端，并期待在用户代理并发送回不同的HTML ...

http://www.whatsmyuseragent.com/

然后服务器逻辑的一个例子是这样的：

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

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

来源

2013-05-20 22:28:23

需要这些文件上的头：

<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

来源

2013-05-20 23:25:42

针对不同屏幕尺寸构建网站的最佳做法

回答

相关问题