Web页面自适应屏幕的方法

Web 移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

设置 Viewport

viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视窗"。手机浏览器是把页面放在一个虚拟的视窗中，通常这个虚拟的视窗比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no>

使用媒体查询器

使用@media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。这实际上就是我们常说的响应式布局。

[class*="col-"] {
   width: 100%;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%，大于 768px 添加了添加断点，不同的断点有不同的效果。更强大有网格系统可以参考 Bootstrap 的相应的 CSS 代码。

目前，除了 IE8 及更早版本外，所有浏览器均已支持媒体查询。要兼容 IE8<，最简单的办法是使用Response.js。

<!-- [if lt IE9] -->
<script src="respond.min.js"></script>
<!-- [endif] -->

使用 css3 单位 rem

和 em 的一样，使用 rem 为元素设定字体大小时，仍然是相对大小，但区别在于相对的是 HTML 根元素，而不是父元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

图片自适应

• img 标签：只需要设置max-width: 100%;或 width:100%;
• background-image：添加如下语句：background-size:100% 100%;
• 图标：建议用 IconFont 之类的字体图标或 SVG，后者可以呈现彩色图标

使用百分比宽度

这种方式最简单，配合媒体查询器使用效果更好。