响应式布局

响应式布局是为了一个网站兼容多个终端，而不是每个终端都去单独写一个网页。

通常情况下，我们把分辨率分为四种：

1.超大屏幕：宽度>1200px

2.中等屏幕：1000px<宽度<1200px

3.小屏幕：768px~1000px

4.超小屏幕：768px以下

 

我们在进行响应式布局的时候，常采用的媒体查询的方式，媒体查询是通过在不同的分辨率下设置不同的样式来达到我们的目的，

媒体查询有两种方法，语法如下：

 

示例一：在link中使用@media：

    <link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>

    上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。

    示例二：在样式表中内嵌@media：

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

　　.all{background:red}

}//在超大屏幕下进行设置

 

@media screen and （min-width:1000px） and (max-width:1200px){

　　.all{width:160px}

}//在中等屏幕下进行设置

 

@media screen and （min-width:768px） and (max-width:1000px){

　　.all{width:100px}

}//在小屏幕下进行设置

 

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

　　.all{width:100%}

}//在超小屏幕下进行设置

 

我们把想要显示的不同效果写在不同的屏幕设置下，就能让网页实现响应式布局了。

 

优点：
    面对不同分辨率设备灵活性强
    能够快捷解决多设备显示适应问题

    缺点：
    兼容各种设备工作量大，效率低下
    代码累赘，会出现隐藏无用的元素，加载时间加长
    其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
    一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

 

在bootstrap中，它自带响应式布局，我们就可以用它内部的方法实现，利用col-lg-x，col-md-x，col-sm-x，col-xs-x来设置样式。