我已经做了一个网站。我想做这个的移动版本。我基本上想将一个表格从主站点导入移动站点。我想从覆盖表格的主站点获取 CSS 代码,然后输入移动站点的 CSS 文件(我已经将 HTML 代码放入移动站点)。问题是,当我这样做时,它开始覆盖当前的 CSS 文件并更改设计。
请帮忙!!
我已经做了一个网站。我想做这个的移动版本。我基本上想将一个表格从主站点导入移动站点。我想从覆盖表格的主站点获取 CSS 代码,然后输入移动站点的 CSS 文件(我已经将 HTML 代码放入移动站点)。问题是,当我这样做时,它开始覆盖当前的 CSS 文件并更改设计。
请帮忙!!
您将需要使用媒体查询。这是一个css3函数。在您的 html 的顶部,您需要输入以下内容:
<meta name="viewport" content="width=device-width" />
然后,在您的 css 中,您将执行以下操作:
@media only screen and (max-width : 320px) {
/* Styles */
}
这是常用媒体查询的参考站点。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
您基本上需要为您正在优化的每个尺寸的设备执行此操作。此外,如果您有其中的几个,您最终可能会得到一个非常大的 css 文件。这可能会阻碍下载速度,尤其是在手机上。在这种情况下,创建单独的较小 css 文件并在您的 html 中使用条件语句来指定要调用的 css。在这种情况下,您将需要在 html 中使用类似这样的内容:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />