响应式布局

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

一般状况下，咱们把分辨率分为四种：

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来设置样式。