css - 在 Web 和移动网站之间共享内容

Question

我正在创建我网站的移动版本。没什么特别的，只有几页。我希望能够以两种形式共享内容，而不必在两个地方进行更新。使用 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,火狐浏览器 3.6.7，Mac 浏览器 5.0.2，Mac 火狐 3.0.6，iPhone 4 Safari ，Android Web 浏览器(模拟器)

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

Answer 1

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/