Web页面自适应屏幕的方法

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

设置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%; 语句为:img { max-width: 98%; };
  • background-image:添加如下语句:background-size:100% 100%;
  • 图标:建议用IconFont之类的字体图标或SVG,后者可以呈现彩色图标。

使用百分比宽度

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注