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

我们是否也允许在这些媒体查询中使用转换和转换？

是的，当然。只需像往常一样包含它们

无论如何都要这样做

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

 }

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

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

}

如果您只是熟悉响应式设计，请考虑一些选项，例如Bootstrap或Foundation或许多其他好选择之一。它们不一定适合所有人，但它们会让你快速入门。

与RWD玩得开心！

响应式WebDesign问题

1 个答案: