响应式布局

开发工具与关键技术：Adobe Dreamweaver CC 2017 响应式布局
作者：孙水兵
撰写时间：2019年1月30

一、什么是响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
二、优点和缺点
优点：[1]

1. 面对不同分辨率设备灵活性强
2. 能够快捷解决多设备显示适应问题
   缺点：[1]
3. 兼容各种设备工作量大，效率低下
4. 代码累赘，会出现隐藏无用的元素，加载时间加长
5. 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
6. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
   首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
   <!--width=device-width 表示宽度是设备屏幕的宽度 initial-scale=1表示初始的放缩比例-->
   <!--shrink-to-fit=no 自动适应手机屏幕的宽度-->

三、CSS3-Meadia Query
外联样式
单个媒体查询
HTML

<link rel="stylesheet" href="CSS/Untitled-2.css" media="only screen and (max-width:480px)">

CSS

body{
	background: #CFD41B;
}

上面表示的是：当屏幕小于或等于480px时，将采用untitled-2.css样式来渲染Web页面。

多个媒体查询

<link rel="stylesheet" href="CSS/style.css" media="screen and (min-width:600px) and (max-width:900px)">

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。
正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面
内联样式

/*@media screen and (min-width:480px){
   	选择器{
   		属性: 属性值;
   	}
   }*/
   @media screen and (min-width:480px){
   	body{
   		background: #100A91;
   	}
   }

only关键字
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

四、用bootstrap 4 进行响应式布局
首先，下载bootstrap 4 文件。其次，引入bootstrap 4 中CSS中的bootstrap.min文件

运用bootstrap 4 中的container类。（bootstrap 4 中所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%））
运用网格系统进行布局。
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

<div class="container">
  	 <div class="row">
  		<div class="col">
  		  1 of 3
  		</div>
  		<div class="col-5">
  		  2 of 3 (wider)
  		</div>
  		<div class="col">
  		  3 of 3
  		</div>
  	</div>
  	<div class="row">
  	  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  	  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  	  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  	</div>
  </div>