如何制作响应式网页设计？

Question

我对如何制作响应式网页设计感到非常困惑。如何使我的对象适合屏幕大小而不混乱？我的目标是让我的网站看起来像这样

非全屏模式时，是这样的：

这是我的 CSS 代码示例：

/* entire site */
* {
  margin: 0;
  padding: 0;
  background-color: white;
  box-sizing: border-box;
}

  /* head-navigation */
  .Rectangle-9 {   /* pink box */
    position: relative;
    width: auto;
    height: 130px;
    flex-grow: 0;
    margin: 0 0 93px;
    padding: 7px 929px 8px 34px;
    background-color: #ffe1e1;
  }

  #nav {   /* text boxes */
    position: relative;
    font-family: Montserrat;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    font-style: italic;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: black; 
    background-color: transparent;
    text-decoration: none;
    padding: 30px;
    cursor: pointer;
    left: -70px;
    bottom: 100px ;
  }
  
  .nav img {   /* nav logo */
    position: relative;
    width: 180px;
    height: 180px; 
    position: relative; top: -20px; left: -50px;
    background-color: transparent;
}

/* Add Nav button hover*/
#nav:hover{
  color: #ff5b5b;
}
 
/* Create two equal columns that float next to each other */
.column1 {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column1 {
    width: 100%;
  }
}

Answer 1

1. 所有需要响应的内容都不应该在

   px

   中定义，而应该在响应单位中定义 - 例如

   %

   或

   vh

   或

   vw

   。

2. 学习使用弹性布局。至少：

display:flex; flex:x; flex-direction:x justify-content:x; align-items:x;

3. 如果必须，请使用

   CSS media queries

   。