Question

嗨，我想知道我是否使用px或％进行响应式设计。我已经使用了px，但它没有足够的响应能力，因为它的大小是固定的，有人可以告诉我什么更适合用于响应式设计？我是html和css的新手，我为我的论文创建了一个学生门户网站。

以下是我的项目示例，我使用px来调整这里的一些元素。我认为还有其他方法可以做到这一点，并且很难做媒体查询，因为你会逐一进行。有人可以给我一些想法吗？

这是480px

这是我的查询示例......

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    .img-responsive{
    width: 230px;
    height: 55px;
    padding-left: 20px;
    padding-top: 5px;
    }
    .footer{
    height: auto;
    }
    .connect{
    padding-left: 70px;
    }
    .contact{
    padding-left: 90px;
    padding-right:50px;
    padding-top: 70px;
    }
    .visit{
    padding-top:40px;
    padding-left: 110px;
    }
    p{
    padding-left: 40px;

    }
    .twitter-hover {
     background-image: url('images/twitter-hover.png');
     margin-left: 70px;
     }
     .social-slide{
     margin-bottom: 50px;
     }
     hr.carved {
     margin-top: 4em;
     }
     .copyr{
     padding-left: 20px;
     padding-right: 10px;
     }
     }

Answer 1

一个好的做法是使用%可以使用它，因为它可以减少编写另一个响应代码的工作量，因为它根据屏幕大小工作，但我们也使用px % 1}}我们不能使用%然后进入 @media查询我们根据屏幕尺寸编写另一个css。

例如

假设我们需要在一个完整宽度的div中创建2个半宽div，我们可以像%这样写它

<强> HTML

<div class="parent">
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>

<强> CSS

.parent{
  width:100%;
}
.child{
  width:50%;
}

以上%成功，因为它会根据屏幕大小调整大小。

在某些情况下，我们无法使用%，因为我们在div中创建应该固定宽度和高度的按钮，然后我们可以在宽度中使用px，如果我们需要调整大小在较小的屏幕中，然后只使用@media查询。

@media个查询可以使用多个定义屏幕尺寸

阅读THIS，了解@media次查询的简要信息。

使用px或％进行响应式设计

1 个答案: