响应式页面四个技巧:

1 只要不写死宽度width，用百分比宽度，页面就是响应式的

2 max-width，用于当屏幕扩展时，页面不随之扩展，再加上居中：margin: 0 auto.

3

media. @media (max-width: 640px){
                ul li{
                width: 50%;
                box-sizing: border-box;
              }
             }

要写在后面

4 窄屏下，一行变两行，使用多个样式，用media切换：

<h1 class=one-line>标题标题标题标题</h1><h1 class=two-line>标题标题<br>标题标题</h1>

@media (max-width: 320px){.  //手机屏幕下
                 .two-line{
                    display: block;
              }
               .one-line{
                display: none;
               }
             }