bootstrap 宽_响应式布局 bootstrap案例

前端响应式开发

介绍

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。

如果pc端和移动端内容非常多的话，还是强烈建议pc和移动端各开发一套，这样后期维护起来更加方便。

响应式布局的实现方案

• css3媒体查询(@media screen)

• 百分比布局(流式布局)   div {  width:20%; }   .box {   border-radius: 50%;  }

• vh/vw     div {  width: 50vw }

css3媒体查询

CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

body {
        // 默认蓝色    background-color: blue;}/* 当屏幕分辨率大于768像素时，应用下面的样式 */@media screen and (min-width: 768px) {
        body {
          background-color: green;    }}/* 当屏幕分辨率大于900像素时，应用下面的样式 */@media screen and (min-width: 900px) {
        body {
          background-color: yellow;    }}/* 当屏幕分辨率大于1024像素时，应用下面的样式 */@media screen and (min-width: 1024px) {
        body {
          background-color: skyblue;    }}

常用的两个属性：

• min-width：最小宽度

• max-width：最大宽度

/* 当屏幕分辨率大于900小于1200像素时，应用下面的样式 */@media screen and (min-width: 900px) and (max-width: 1200px){
        .a{
            color: purple;        font-size: 26px;    }}

如何确定媒体查询的分割点也是一个开发中会遇到的问题，下面是市场上的移动设备和电脑屏幕分辨率的分布情况，可以发现不同品牌和型号的设备屏幕分辨率一般都不一样 。

如果我们选择600px,900px,1200px,1800px作为分割点，可以适配到常见的14个机型：

当然这只是其中的一种分割方案，我们还可以这样划分：480px,800px,1400px,1400px

而典型的响应式布局框架，Bootstrap是怎么进行分割的呢？

百分比布局(流式布局)

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

/* pc  */html, body { margin: 0;padding: 0;width: 100%;height: 100%;}aside {
        width: 10%;    height: 100%;    background-color: red;    float: left;}main {
        height: 100%;    background-color: blue;    overflow: hidden;}/*