自适应主题下多页面网站的响应布局
这周，我读过伊桑·马尔科特( Ethan Marcotte )的“响应性网页设计”( responsive )一书&阅读了适应性主题网站上的文档，然而，当我有多个带有自己的CSS文件的网页时，我对如何在适应性主题中推进响应主题感到困惑。
从关于自适应主题的文档中，我们必须将每个布局的CSS拆分为其单独的文件(responsive.smartphone.landscape.css；responsive.desktop.css)。这是否意味着，我们将把完整的站点CSS放在一个responsive.desktop.css文件中？(！当然，这是不对的。
我们到目前为止所做的工作(以其目前的形式，网站没有响应)是有小的CSS文件为每个不同的区域/地区的网页。除此之外，我们还有自己的CSS文件的自定义模块。我们将如何处理大量CSS文件&将代码分发到适应性主题中的响应文件中？
回答 3
Drupal用户
发布于 2012-12-10 08:13:47
几天前，我们(团队)完成了响应设计站点，我们所做的只是在您的css文件(blocks.css、field.css、node.css等)中编写您的底层css。对于ipad/智能手机版本，我们使用了另一种css样式，用于门户版和景观版，如下所示：
ipad-landscape.css
ipad-portrait.css
ipad.css
smartphone-landscape.css
smartphone-portaint.css
smartphone.css和int html.tpl.php
<!--[if !IE]>-->
<link media="only screen and (max-width : 480px)" href="/sites/all/themes/acro/css/layouts/responsive/smartphone.css" rel="stylesheet" type="text/css">
<link media="only screen and (min-width : 321px) and (max-width : 480px)" href="/sites/all/themes/acro/css/layouts/responsive/smartphone-landscape.css" rel="stylesheet" type="text/css">
<link media="only screen and (max-width : 320px)" href="/sites/all/themes/acro/css/layouts/responsive/smartphone-portrait.css" rel="stylesheet" type="text/css">
<link media="only screen and (min-width : 481px) and (max-width : 1024px)" href="/sites/all/themes/acro/css/layouts/responsive/ipad.css" rel="stylesheet" type="text/css">
<link media="all and (min-width: 769px) and (max-width: 1024px), all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)" href="/sites/all/themes/acro/css/layouts/responsive/ipad-landscape.css" rel="stylesheet" type="text/css">
<link media="all and (min-width: 481px) and (max-width: 768px), all and (min-width: 481px) and (max-width: 768px) and (orientation: portrait)" href="/sites/all/themes/acro/css/layouts/responsive/ipad-portrait.css" rel="stylesheet" type="text/css">
<!--<![endif]-->对于特定的页面，我们在这个文件中写了css。
我们还使用沙斯和罗盘来处理css样式。
Drupal用户
发布于 2012-12-10 08:58:36
最近有关响应性设计的方法是“移动优先”。将桌面站点主题化，然后将其分解为移动版本会更费时，但其中一些也会进入最初的架构设计。但是，这是另一个话题。
首先，您应该尽可能保持CSS的泛型，然后在需要时深入到特定项。您可能需要研究的是使用CSS预处理器，比如LESS。在我们的项目上(通常使用较少)，我们为站点的不同区域创建CSS文件。页眉、内容、侧边栏、页脚、移动等，然后将它们编译成几个CSS文件。在这个截图中，您可以看到不同的部分被分解，并且它们都被编译到global.css中(其他部分是直接的)。
Drupal用户
发布于 2012-12-10 07:13:22
我只将这些css-文件(例如responsive.smartphone.css)用于特定于设备的样式，所有应用于所有设备的东西都会进入"basics.css“，或者您想要命名它。特定于模块的css停留在它所属的位置，而在css文件中，对于设备大小的css文件仅是对.
我经常沿着“桌面优先”的路线工作，然后为较小的设备添加样式。如果您有一个复杂的布局，那么特定的样式表可以相应地增长。
https://drupal.stackexchange.com/questions/52722
复制相似问题
腾讯云开发者
