Question

我即将开始设计我在php中编码的网站。这是一个相当复杂的网站...

显然，我想让它适合所有浏览器和设备。

我应该使用固定像素为正常的计算机尺寸编码CSS，当我完成后，为其他设备制作另一个样式表，如iphone和ipad？

或者我应该尝试制作适用于所有分辨率的自适应网站？在这种情况下，我应该看看CSS框架？有什么建议吗？

Answer 1

以下是设计适用于所有屏幕尺寸的网页的一些提示。我将深入研究媒体查询和其他事情。

在我过去做过的网页上，他们通常都有现有的图片（通常是横幅/标题等）。所以我通常使用最大宽度来设计网站，例如，如果已经存在的横幅图像是900px宽，我将使页面宽900px，更具体地说是内容包装器将是900px宽，其内容将总和为 100％。
将所有内容保存在全局内容包装器中。这是确保页面大小保持100％一致的最简单方法。
构成包装器的总和应始终为100％。填充包装，但它永远不会超出它。您可能有许多列或分区，您可以按任意百分比调整大小为100（例如，col1 width =“33％”，col2 width =“33％”，col3 width =“34％”= 100 ％）
尝试选择适用于所有屏幕尺寸的图像。在使用响应式网页设计（有javascript解决方案）时，没有内置的方式可以交换到移动图像，但是在缩小时选择看起来不错的图像。
避免缩放图像。这就是为什么我倾向于使最大页面大小与标题图像（如果有）相同。如果页面没有图像，100％的液体布局也非常好。
如果内容包装器已修复，请使用媒体查询将其转换为百分比：D示例如下。

我要写一个MAX宽度为900px的页面的基本示例，其中列可以在任何移动/桌面站点上运行。

默认-style.css文件

img { max-width: 100%; height: auto; width: auto; /* ie8 */ border: none; } .content_wrap { width: 900px; margin-left: auto; margin-right: auto; height: auto !important; } /* Columns */ #column-wrap { float: left; width: 100%; } #column-left { width: 30%; float: left; } #column-middle { width: 35%; float: left; } #column-right { width: 35%; float: left; }

默认-queries.css

/* Turn it into a liquid layout at our max-width of 900px */ @media screen and (max-width: 900px) { .content_wrap { width: 100%; } } /* most smart phones */ /* This query will turn all 3 columns into 1 column at 540px */ @media screen and (max-width: 540px) { #column-wrap { position: relative; clear: both; } #column-wrap div { margin-bottom: 10px; float:none; clear: both; } #column-left { width: 100%; } #column-middle { width: 100%; } #column-right { width: 100%; } }

现在为html：D

<强>的index.html

<!DOCTYPE html> <html> <head> <link href="default-styles.css" rel="stylesheet" /> <link href="default-queries.css" rel="stylesheet" /> </head> <body> <div class="content_wrap"> <div id="column-wrap"> <div id="column-left"> <p>HELLO I"M LEFT COLUMN</p> </div> <div id="column-middle"> <p>HELLO IM MIDDLE</p> </div> <div id="column-right"> <p>RIGHT</p> </div> </div></div> </body> </html>

因此，这是响应式网站的最原始示例。在固定宽度 900px时使用 content_wrapper 类（因为使用的最大图像可能是900px）。但是当屏幕小于900px时，我们从固定切换到液体，通过媒体查询切换到液体宽度将允许我们的图像缩小，我们的文字包装，以及一大堆其他伟大的东西！

但是，还有更多的东西。如果页面只有线性内容，那么我们需要做的就是这样，但大多数页面都有不同的列，以充分利用大屏幕尺寸。这是媒体查询真正派上用场的地方。如果您研究列，它们的总和将始终占用content_wrap的100％。他们将缩小为一个小型网站，但他们真的很小。这就是为什么我为较小的屏幕进行另一个媒体查询并消除多列布局。只需清除浮动并使每列的宽度为100％，就可以实现更高效的移动布局。

无论如何，真的很长的答案，但希望我对如何正确设计一个CSS / HTML网站（php，ASP.net，MVC等，也可以全部投入）的看法/意见将让你开始！使用包装器，媒体查询，没有放大的图像以及看起来很好缩小的图像进行设计是非常好的做法IMO;）

我喜欢固定宽度的页面！它们更具通用性并可防止过度缩放的图像 CSS3中的媒体查询可以处理响应性;）

我通常不做移动优先设计，但这只是我个人的偏好。我认为单一方式没有优势

如另一个答案所述，对于非CSS3浏览器，response.js效果很好

Answer 2

像往常一样，这取决于。如果您认为许多设备都会访问您的网站，那么您可能需要查看自适应设计：http://johnpolacek.github.com/scrolldeck.js/decks/responsive/和http://www.alistapart.com/articles/responsive-web-design/以获取更多详细信息。

推荐的方法是采用“移动优先”方式进行样式处理，因此适用于移动设备的小标记，然后逐步增强其他具有更大分辨率的设备。

您可能想要使用框架或手工编写代码 - 这是个人选择。

如果你对不同的设备有不同的需求，你可能想要创建完全不同的移动网站，例如类似于当前的BBC新闻，尽管值得注意的是包括BBC在内的很多网站都在采用响应技术，所以这个是一种越来越被采用的趋势。

还值得考虑您的观众将使用哪些浏览器。当您回到旧的IE版本时，尤其需要查看respond.js library等javascript技术，以允许媒体查询工作。

Answer 3

这两者并不是相互区别的。

这两种方法通常是：

多个样式表，媒体查询决定加载哪一个。
使用流体测量值（百分比），使该位置流动。

实际上，你经常最终使用两者。

尝试执行此操作时存在许多问题，尤其是旧版IE不支持媒体查询，并且始终呈现所有内容。

框架很好，但您可能会发现它们具有限制性。周围有许多，他们基本上都做同样的事情，所以只需谷歌响应式CSS框架，看看你找到了什么。

我还建议在此时查看SASS - 我使用它，这样我就可以自动生成一个IE样式表，它具有960px宽度版本，没有媒体查询，同时生成包含所有查询的另一张表。

Answer 4

我已经回答了，但是我认为我要说的是相关的......

大多数网站同时使用桌面版网站和移动版网站。桌面站点几乎总是固定宽度，最大宽度约为1000px。但是，这种情况开始发生变化，您将看到比过去更多的自适应网站。移动网站需要具有自适应宽度，因为所有各种手机型号都有各种疯狂的不同分辨率。我建议移动网站应该使用的最小宽度大约是320px，因为大多数现代手机的宽度至少是这个宽度。

至于移动侦测，请查看PHP Mobile Detect，这是我使用的，它运作良好。你只需要投入

<?PHP
if ($detect->isMobile()) {
    header('Location: /path/to/mobile/site');
} else {
    header('Location: /path/to/full/site');
}
?>

位于第一页的顶部。您应该使用单独的启动页面重定向到index2.htm之类的内容，以便用户可以选择查看桌面站点。试图弄清楚如何设置cookie会给你省去很多麻烦......

Answer 5

我建议您进行自适应或响应，以在多个设备分辨率下保持其外观。话虽这么说，CSS框架将是您的选择，因此您的html文件中不会包含主题内容和样式代码。

CSS初学者问题

5 个答案: