响应式和@media的简单用法

Posted 2020-09-10 蓝度飞

　　本文不会详细去说@media的各种用法，只是简单的描述一下PC端的响应式是什么，如何去实现。

　　响应式是指：在不同宽度的屏幕下，都可以看到完整的页面内容，只不过，在宽度较小的屏幕下，可能内容会有删减，布局可能会有些改变等。

　　响应式一般会使用 CSS3 媒体查询 @media 来实现。

　　具体使用如下所示：

　　

.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;
    }
}    

　　笔者自己认为PC端响应式无非就是多定义了几次CSS样式，然后在不同宽度的屏幕下显示出来，覆盖之前的CSS样式。

　　在了解响应式时，笔者曾自己利用它临摹了一次苹果官网的响应式页面，现将笔者苹果官网的github地址公布，希望对读者有一定的启发作用：

　　https://github.com/nation-blue/apple