CSS初学者问题

Question

我正要开始设计我用php编写的网站。这是一个相当复杂的网站..。

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

我是否应该使用正常计算机尺寸的固定像素对CSS进行编码，并在完成后为其他设备(如iphone和ipad )创建另一个样式表？

或者，我是否应该尝试创建一个适用于所有分辨率的自适应站点？在这种情况下，我应该研究一下CSS框架吗？有什么建议吗？

Answer 1

像往常一样，这要视情况而定。如果您认为您的站点将被许多设备访问，那么您可能希望查看响应式设计：http://johnpolacek.github.com/scrolldeck.js/decks/responsive/和http://www.alistapart.com/articles/responsive-web-design/以获取更多详细信息。

推荐的方法是采用“移动优先”的方法来设置样式，这样对于移动设备，它就可以很好地工作，对于其他分辨率更大的设备，它会逐渐增强。

您可能希望使用框架或手动编写代码--这是个人的选择。

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

同样值得考虑的是，您的受众将使用哪些浏览器。当你回到老的IE版本时，特别是你需要查看javascript技术，比如respond.js library，以允许媒体查询工作。

Answer 2

这里有一些设计网页的技巧，可以在任何尺寸的屏幕上工作。我还将深入研究媒体查询和其他内容。

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

我将写一个最大宽度为900px的页面的基本示例，该页面包含可在任何站点移动/桌面上使用的列。

default-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;
}

default-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 (因为im使用的最大图像可能是900px)。但是当屏幕小于900px时，我们通过媒体查询从fixed切换到liquid 切换到liquid宽度将允许我们的图像缩小，我们的文本换行，以及一大堆其他很棒的事情！

但是，还有更多的原因。如果页面只有线性内容，但大多数页面都有不同的列，以充分利用大屏幕尺寸，这就是我们需要做的所有事情。这就是媒体查询真正派上用场的地方。如果你研究这些列，你会发现它们的和在任何时候都占据了content_wrap的100%。它们将缩小为一个小网站，但它们真的真的很小。这就是为什么我对较小的屏幕进行了另一次媒体查询，并取消了多列布局。只需清除浮动并使每一列的宽度为100%，就可以实现更高效的移动布局。

无论如何，非常长的答案，但希望我的看法/意见如何正确地设计一个网站与CSS/HTML (php，ASP.net，MVC等，都可以扔在那里)能帮助你开始！带有包装器的设计，媒体查询，没有放大的图像，以及看起来很好的缩小图像都是很好的实践。)

我喜欢固定宽度的页面！它们更通用，可以防止过度缩放的图像CSS3中的媒体查询负责响应;)

我通常不做移动端优先的设计，但这只是我个人的偏好。我看不出一种方法比另一种方法有什么好处。

正如在另一个答案中所述，对于非css3浏览器，response.js工作得非常好。

Answer 3

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

这两种方法通常是：

• 多个样式表，媒体查询决定加载哪个样式表。
• 使用流体度量(百分比)，因此站点是流动的。

实际上，您最终通常会同时使用这两种方法。

尝试这样做有很多问题，其中一个特别是旧的IE不支持媒体查询，并且总是渲染所有内容。

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

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