Question

我正在尝试学习基础5并正在尝试交换。

我使用了提供的默认短代码，并且已经成功地将我的图像换成每个布局。

我想知道是否可以将CSS属性（例如修改边距或边框颜色（例如））更改为正在切换的图像，所以我想它可能是添加到交换短代码的东西？

我尝试将CSS属性添加到样式表，即：

div.small-12 div.logo img {border:1px solid blue;}

div.medium-6 div.logo img {border:1px solid red;}

结果始终是最后一次声明。也许这是我的CSS。

无论如何，我们将非常感谢任何反馈。

Answer 1

如果Foundation为HTML中的元素添加/删除了类，那么你的CSS就可以完成这项工作 - 但它（大部分）以相反的方式工作 - 你将类添加到元素中，而Foundation使用一些（复杂的）CSS来设置它们的样式。

使用＆＃39;媒体查询＆＃39;您仍然可以实现您的目标。该基金会使用：

假设您没有更改默认的基本媒体查询，则以下CSS可以完成小型＆amp;中等屏幕：

 @media only screen and (max-width: 40em) {
        img.my_class {border:1px solid blue;}
 }

/* ... will apply blue border on small screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
        img.my_class {border:1px solid red;}
}

/* ..will apply a red border for medium screens */

..然后将类名my_class应用于HTML

中的img元素

我建议你看一下SASS（如果你还没有） - 这会使这些类型的事情变得更加简单:)在基金会网站上有一些有用的好视频

如何使用Foundation 5添加或修改css属性以交换短代码

1 个答案: