响应式理解

响应式是指：在不同宽度的屏幕下，都可以看到完整的页面内容，只不过，在宽度较小的屏幕下，可能内容会有删减，布局可能会有些改变等。响应式一般会使用 CSS3 媒体查询 @media 来实现。（PC端响应式多定义了几次CSS样式，然后在不同宽度的屏幕下显示出来，覆盖之前的CSS样式。）

如下：

.box{
    width: 1024px;
    height:40px;
    background:red;
    margin:0 auto;
}

@media screen and (max-width:1023px){    /*当屏幕小于1000px时执行*/
  .box{
        width: 100%;
        padding:0  25px;
        box-sizing:border-box;
    }
}

@media screen and (max-width:700px){     /*当屏幕小于700px时执行*/
  .box{
       padding:0 15px;
    }
}

【个人见解】