css - 在不破坏设计的情况下将 CSS 文件的一部分输入到另一个文件中

Question

我已经做了一个网站。我想做这个的移动版本。我基本上想将一个表格从主站点导入移动站点。我想从覆盖表格的主站点获取 CSS 代码，然后输入移动站点的 CSS 文件（我已经将 HTML 代码放入移动站点）。问题是，当我这样做时，它开始覆盖当前的 CSS 文件并更改设计。

请帮忙！！

Answer 1

您将需要使用媒体查询。这是一个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" />