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

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 % 我们不能使用 % 然后在 @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%;
}

Above % is successful because it div will resize according to the screen size.

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

@media queries can be used multiple with defines screen sizes

阅读 THIS 了解有关 @media 查询的简要信息。

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

Use px or % for responsive design

html

css

media-queries