Question

我正在阅读有关响应式网页设计或流畅布局的一些教程。

在该示例中，3列布局会自动转换为较低屏幕尺寸的2列布局。他们通过2个CSS属性实现了这一点;

float:none
margin-right:0

你能帮我理解这是怎么发生的吗？保证金权利是根据什么来计算的？

链接到示例http://www.alistapart.com/articles/responsive-web-design/

Answer 1

这篇文章肯定会向您展示我如何做到这一点，因此您可以根据自己的特殊需求进行调整。你必须超越一步。希望以下解释和@Wesley的答案将帮助您做到这一点。

<强>浮动：无

通过在元素（先前已浮动）上设置float：none，这会导致这些元素叠加在彼此之上用于那些屏幕大小。浮动导致元素并排排列。

<强>余量右：0

在这个例子中，他们设置了margin-right：0，以便那些想象在右侧很好地排列。如果您注意到，那些图像是那些最右边的图像用于那些尺寸的屏幕。如果margin-right未设置为零，则它将继承应用了保证金权限的.figure样式。

Answer 2

您链接的示例包含对答案的详尽解释，比我在此处提供的更多。他们使用CSS媒体查询来确定视口的大小：

http://www.w3.org/TR/css3-mediaqueries/

CSS文件中的示例：

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

使用media标记的<link>属性的示例：

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="my-media-specific-stylesheet.css" />

http://www.alistapart.com/articles/responsive-web-design/

值得庆幸的是，W3C创建了媒体查询作为CSS3的一部分   规范，改进了媒体类型的承诺。一个媒体   查询允许我们不仅要定位某些设备类，而且要定位到   实际上检查设备渲染的物理特性   我们的工作。例如，随着最近移动WebKit的兴起，   媒体查询成为一种流行的客户端技术   针对iPhone，Android手机及其同类产品量身定制的样式表。至   这样做，我们可以将查询合并到链接样式表的媒体中   属性：



该查询包含两个组件：


媒体类型（屏幕）和

括在括号中的实际查询，包含一个   要检查的特定媒体功能（最大设备宽度），然后是   目标值（480px）。

用简单的英语，我们询问设备的水平分辨率   （max-device-width）等于或小于480px。如果测试   换句话说，如果我们在小屏幕上观看我们的作品   像iPhone一样的设备 - 然后设备将加载shetland.css。   否则，链接将被完全忽略。

CSS float：none和margin-right

2 个答案: