CSS相对宽度的一列布局

Question

我需要我的网站布局如下：

如果内容div宽于50em，请应用规则width: 75%; max-width: 75em。 否则，max-width: 50em; min-width: 25em适用。

这种设置的主要原因是宽屏面板与笔记本电脑和手机。内容始终水平居中。如果div总是宽75％，它会破坏手机上的布局，而且它也会在宽屏幕上制作长而不可读的线条。

Answer 1

您正在寻找的是媒体查询：

@media (min-width: 50em)
{ 
   div
   {
       width: 75%;
       max-width: 75em;
   }
}

如果屏幕宽度大于50em，则仅应用此媒体查询中的css规则。您可以在css中使用任意数量的媒体查询。

以下是有关此主题的更多信息：http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Answer 2

使用@media查询。他们是为这样的事情而做的。

@media screen and (min-width: 50em) {
     #div { width: 75%; max-width: 75em; }
}

更多信息http://css-tricks.com/css-media-queries/

Answer 3

在CSS中使用@media闭包吗？

您可以阅读：http://help.campaignmonitor.com/topic.aspx?t=164