css - 响应式网页设计问题

Question

好吧，今天我说嘿，让我们学习一些响应式网页设计技术。我想到目前为止还不错 ;)

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

我想问我一些很棒的 S.O.成员，所以我看到媒体查询集中在屏幕上，无论如何都要这样做

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

   }

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

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

Answer 1

Also are we allowed to use transitions and transform in these media queries?

是的，当然。像往常一样简单地包含它们

is there anyway to do this

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

 }  

不知道你在这里得到了什么。如果您的目标是为 500px 以上的视口(viewport)自定义 avacweb_chat div，请使用

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

}    

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

享受 RWD 带来的乐趣!