媒体查询实现响应式布局

发布时间:2019-01-23 11:38:08 来源:CSS小技巧

本文主要介绍 @media 查询的使用。通过媒体查询,在不同的屏幕尺寸下,可以设置不同的样式。以此,可以完美解决不同屏幕适配的问题。话不多说,先来看看效果:

媒体查询实现响应式布局

CSS

@media screen and (max-width: 400px) {

    .btn {

        background-color: lightblue;

    }

}

@media screen and (min-width: 400px) and (max-width: 800px) {

    .btn {

        background-color: yellowgreen;

    }

}

@media screen and (min-width: 800px) {

    .btn {

        background-color: orangered;

    }

}

.btn {

    width: 100%;

    height: 60px;

    border: none;

    outline: none;

}

解析

将大大小小的屏幕尺寸划分为连续的几个宽度区间,在各个宽度区间内,设置各自的元素属性。这样在不同宽度的屏幕上,媒体查询会根据具体的屏幕尺寸适配到对应的区间,来应用此区间内的元素属性,达到适配不同屏幕的效果。

  • 高度同样可以适配

  • 这时想想使用 bootstrap 时用到的 xs、sm、md、lg,有木有恍然大悟的感觉 ^_^

这里再和大家分享一下:https://github.com/nanzhangren/CSS_skills

最新资讯

  1. 响应式网站建设需要准备多少开发预算
  2. CMSJIA介绍
  3. 遵义信息技术服务、WEB软件开发公司
  4. 建设公司网站的作用体现
  5. 品牌保护中域名、商标同等重要
  6. 网站建设哪家公司好
  7. 建设开发手机网站的优势及作用
  8. 我们研究了100个小程序,得出了这些经验!
  9. 公司定制开发网站建设的优势
  10. 移动互联网建站:遵义做网站建设那家公司好
  11. 贵州腾巢网络成功入驻熊掌号,再现移动互联时代新域名
  12. 贵阳旅游网站建设及技术开发解决方案