Bootstrap框架和响应式布局

弹性布局

1.浮动+百分比布局

2.FIex布局 Flex布局对于设计比较复杂的页面非常有用,实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变

响应式布局

Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。

我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。

响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

什么是响应式

• 响应式开发的目的就是:一个网站能够兼容多种终端
• 移动web开发和响应式开发是必须具备的技能
• 对所有的屏幕无论是手机、PC、平板等等做一些屏幕适配

响应式开发的原理：媒体查询：

查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。

实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。也可以使用all就是所有还有就是可以针对于打印print

• 超小屏幕      （移动设备）         w<768px
• 小屏设备    768px-992px          768 <= w <992
• 中等屏幕    992px-1200px     992 =< w <1200
• 宽屏设备    1200px以上      w>=1200

CSS 语法

@media 媒体类型{

}