关于前端:响应式开发

36次阅读

共计 541 个字符，预计需要花费 2 分钟才能阅读完成。

响应式开发就是应用媒体查问针对不同宽度的设施进行布局和款式设置，从而适配不同设施。

响应式须要一个父级作为布局容器，通过媒体查问扭转这个布局容器的大小，再扭转外面子元素的排列形式和大小，从而实现不同屏幕尺寸下，看到不同的页面布局和款式变动。

常见的响应式尺寸划分：

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：设置宽度为 970px
大屏幕（大桌面显示器，大于等于 1200px）：设置宽度为 1170px

  @media screen and (max-width: 767px) {
    .container {width: 100%;}
  }

  @media screen and (min-width: 768px) {
    .container {width: 750px;}
  }

  @media screen and (min-width: 992px) {
    .container {width: 970px;}
  }

  @media screen and (min-width: 1200px) {
    .container {width: 1170px;}
  }

响应式开发，能够应用 Bootstrap 框架，能使咱们的开发更加便捷。