网站建设中使用 @media 查询的作用

 行业新闻     |      2018-08-18 09:28

今天酷仿站小编和大家一起分享网站建设中@media的用处

使用 @media 查询,可以针对不同的媒体类型定义不同的样式。针对不同的屏幕尺寸设置不同的样式,特别是如果需要设置设计响应式的页面,@media 是非常有用的。

比如在做响应式网站时,电脑端的尺寸和手机端尺寸显然是不同,那么我们可以通过这个方法,分别设置不同样式。
       @media only screen and (max-width: 500px) {

    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
              }

另一个用处就是比如要隐藏某些代码,例如电脑端不需要显示而手机端需要显示,这时就可以用到这个
      .footer_dh{
               display: none
                }      

@media (max-width: 767px) {

              .footer_dh{
                  display: block !important;
                  }
           }

以上就是今天本文的全部内容,希望对大家的学习和工作有所帮助,同时希望大家多多关注酷仿站,仿站、定制网站欢迎咨询酷仿站,谢谢!