前端试水(3) 自适应与响应式布局

前言

其实一开始并没想考虑响应式布局的问题，但由于在幻灯片大图时找的样例有考虑到这个，就想对浮在幻灯片上的文字能否也有响应式的效果。昨晚研究一下，虽然没太掌握，效果也没有达到最优，但总算完成基础需求。

自适应布局与响应式布局

自适应布局和响应式布局网上有不少介绍，我比较认同以下这种。

自适应布局是很显然易见的概念，就是网页能自动适配不同大小屏幕，根据屏幕大小自动调整网页内容的宽度和高度，但是内容和布局还是不会变。响应式布局是最近几年随着Bootstrap开源流行起来的概念，不仅包括了自适应布局的概念，而且还增加对布局变化。

实现方式

定义viewport

viewport 是用户网页的可视区域(“视区”)，viewport可能比浏览器的可视区域小，也可能比浏览器的可视区域大（此时就需要移动网页或者使用滚动条）。

对于viewport的部分，特别涉及到移动设备，实际上并没有这么简单。这里就不深入探究了，有时间可兴趣可以看下移动前端开发之viewport的深入理解，这里简单阐述对于移动设备的三种viewport，分别是layout viewport、visual viewport和ideal viewport。而ideal viewport是最适合移动设备的viewport，因为无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

移动设备默认的viewport是layout viewport，因此要在网页代码的头部，加入一行viewport元标签，将viewport定义为ideal viewport：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%，`shrink-to-fit=no解决iOS9中不起作用的问题。

除了以上几个外，还有下面表格中的参数：

参数	含义
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport的高度，这个属性很少使用
user-scalable	是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

尽量应用相对高度/宽度/字体/图片

尽量不指定绝对像素px，而是用相对的单位：

width: 80%;
width: 80vw;      /* vw: 视窗宽度的百分比（1vw 代表视窗的宽度为1%） */
width: 80vh;      /* vh: 视窗高度的百分比 */
width: 80vmin;    /* vmin: 当前vw和vh中较小的一个值 */
width: 80vmax;    /* vmax: 当前vw和vh中较大的一个值 */
width: auto;

font-size: 1.5em; /* 父元素font-size的1.5倍，仅可用于font-size */
font-size: 2rem;  /* 根元素的2倍，还可用于width */

vw、vh与%百分比的区别

%是相对于父元素的大小设定的比率，vw、vh是视窗大小决定的。
vw、vh优势在于能够直接获取高度，而用%在没有设置body高度的情况下，是无法正确获得可视区域的高度的。

vmin、vmax的用处

做移动页面开发时，如果使用vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于vmin和vmax是当前较小的vw和vh和当前较大的vw和vh。这里就可以用到vmin和vmax。使得文字大小在横竖屏下保持一致。

流式布局(fluid grid)

流式布局就是每个区块都是浮动的，如果宽度太小，超出的元素自动到下方，不会在水平方向溢出，避免水平滚动条。可以使用float实现，eg: float: left。

或者直接使用Bootstrap的栅格布局Grid Layout。Bootstrap将每一行分为12个格子，针对不同的屏幕大小在不同的断点位置进行换行。有了12个格子，也可以更好的将一行按比例分配。

选择加载css

html标签<head>中自适应加载css

css3引入Media Jquery模块，可以自动探测屏幕宽度，然后加载相应的CSS文件。

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

具体例子：

<!-- 如果屏幕宽度小于400像素(max-device-width: 400px)，就加载tinyScreen.css -->
<link rel="stylesheet" type="text/css" 
      media="screen and (max-device-width: 400px)" 
      href="tinyScreen.css" />

<!-- 如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css -->
<link rel="stylesheet" type="text/css"
      media="screen and (min-width: 400px) and (max-device-width: 600px)"
      href="smallScreen.css" />

css文件中自适应加载css

除了用html标签加载CSS文件，还可以在现有CSS文件中加载。

@import  url("tinyScreen.css") screen and (max-device-width: 400px);

css中@media自适应应用css

同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则，这个选择是最常看到的。

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

比如说在css中@media (min-width: 768px)表示最小是768也就是>=768，而@media (max-width: 767.98px)表示最大的是767.98也就是<=767.98。

下面的几组是Bootstrap中的css框架，可以用来参考学习。

从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了

  @media (min-width: 576px) { //>=576的设备 }
  @media (min-width: 768px) { //>=768的设备 }
  @media (min-width: 992px) { //>=992的设备 }
  @media (min-width: 1200px){ //>=1200的设备 }
  
  @media (max-width: 1199.98px){ //<=1199.98的设备 }
  @media (max-width: 991.98px) { //<=991.98的设备 }
  @media (max-width: 767.98px) { //<=768.98的设备 }
  @media (max-width: 575.98px) { //<=575.98的设备 }

这里需要注意下顺序，最后面的会覆盖前面的css。如果倒过来的顺序，那么写在了下面那么很悲剧。比如1440的宽度，由于1440>576，那么1200的样式就会失效。所以用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面。

Resource资源链接汇总

移动前端开发之viewport的深入理解、Bootstrap栅格布局Grid Layout

版本控制

Version	Action	Time
1.0	Init	2018-08-14

ZHENG Zi'ou

前言