1

我正在创建我的网站的移动版本。没什么花哨的，只有几页。我希望能够以两种形式共享内容，而不必在两个地方进行更新。使用 CSS 最简单的方法是什么？或者我可以创建某种 XML 或文本文件并在两个站点中读取它吗？

这是我最终使用的：

<!--[if IE]>
<link rel='stylesheet' href='ie.css' type='text/css' />
<![endif]-->
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' type='text/css' />  
<link rel='stylesheet' media='screen and (min-device-width: 481px)' href='standard.css' type='text/css' /> 


<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

这适用于：

Windows IE 8、Windows Firefox 3.6.7、Mac Safari 5.0.2、Mac Firefox 3.0.6、iPhone 4 Safari、Android Web 浏览器（模拟器）

您必须按此顺序放置所有内容，否则它将无法正常工作。您还必须确保standard.css 具有与mobile.css 相同的所有css 属性。例如，如果在移动设备中您说#myitem { border:1px solid black; }但您不想在标准视图中为#myitem 设置边框，则必须将其放入#myitem { border:none; }standard.css，否则 Mac Firefox 将从 mobile.css 文件中获取值并显示边框该项目。

4

2 回答 2

2

CSS 是你最好的选择。

通过使用媒体查询，您可以决定使用哪个样式表来显示您的内容。

 <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
 <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

此链接可能对您有所帮助：http ://css-tricks.com/resolution-specific-stylesheets/

于 2010-10-01T01:15:59.217 回答
0

如果您真的想共享页面的全部内容并且只是让内容的位置和样式有所不同，那么 CSS 是您最好的选择。如果您想提供页面的“移动优化”版本，显然 CSS 不会让您做太多事情。在这种情况下，有很多选择，例如将真正的“内容”存储在数据库或静态文件中，并通过 PHP 或等效工具生成包含相关数据的页面，或者对源 XML 文件执行相同操作并生成通过 XSLT 的页面。

于 2010-10-01T01:36:35.153 回答