0

好的，所以今天我说嘿，让我们学习一些响应式网页设计技术。到目前为止，我想都很好；）

@media screen and (min-width: 768px) {
  #avacweb_chat{
    height: 70%;
    width: 600px;
    }
 }
@media screen and(min-width:600px) {
  #avacweb_chat{
    height: 70%;
    width: 540px;
    }
 }
@media screen and(min-width:480px) {
  #avacweb_chat{
    height: 500px;
    width: 320px;
    }
  #chatbox_members{
    display:none;
    }
 }
@media screen and(min-width:320px) {
  #avacweb_chat{
    height: 360px;
    width: 220px;
    }
 #chatbox_members{
   display:none;
    }
}

我想向我的一些伟大的 SO 成员问几个问题，所以我看到媒体查询集中在屏幕上，无论如何都可以这样做

 @media #avacweb_chat and (min-width: 500px) {

   }

还是我们只允许关注屏幕尺寸？我们也可以在这些媒体查询中使用转换和转换吗？（我知道 IE 不支持）。这是我仅有的两个问题。

关注除屏幕之外的另一个元素的大小 将 CSS3 添加到查询中。

4

1 回答 1

1

我们也可以在这些媒体查询中使用转换和转换吗？

是肯定的。像往常一样简单地包括它们

有没有办法做到这一点

@media #avacweb_chat and (min-width: 500px) {

 }

不知道你在这里得到什么。如果您的目标是为 500 像素以上的视口定制 avacweb_chat div，请使用 

@media (min-width: 500px) {
#avacweb_chat{
/* some styles here */
}

}

如果您刚刚开始使用响应式设计，您是否考虑过一些选项，例如Bootstrap或Foundation或许多其他不错的选择之一。它们不一定适合所有人，但它们会让您快速入门。

玩 RWD！

于 2013-05-31T00:35:33.170 回答