几个步骤轻松设计自适应页

作者:浮夸的晓编 分类:移动互联网 发布于:2014-12-23
  随着智能手机的普及,越来越多的人开始使用手机上网,而移动设备基本已经超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

  手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果其实并不难。

  1、允许网页宽度自动调整。首先,在网页代码的头部,加入一行viewport元标签。

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

  上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。


  2、设置不同宽度大小选择不同的CSS文件(意思是屏幕小于600用下面的文件)。

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

  当然你也可以直接合并成一个文件。(建议新手还是直接分开的好,免的把头都搞大了,哈哈!)

  如(意思是屏幕小于480px的时候用这段。):
[email protected] screen and (max-width: 480px) {
  html {-webkit-text-size-adjust: none;}
  #main-nav a {font-size: 90%;padding: 10px 8px;}
  }

  3、不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要包裹在发布文章是也要注意。

  将width:xxx px;改为用width: xx%;或width:auto;来代替宽度。

  4、使用{display:none;}来隐藏不想显示的内容,由于手机屏幕小,若也像电脑一样展示过多的内容,会使浏览的用户感到反感。

  使用方法:
  .nav {display:none;} (不显示PC页面的菜单栏,当然你也可以直接根据手机屏幕给nav写一个新的菜单样式,如下拉的那种,反正个人觉得简洁点好,可以参考我的网站。)
  #divAdsense{display:none;}(不显示PC下这个广告位,同样可参考我的网站代码。)
  
  当然还可以实现在PC屏幕上不显示某个广告位过其它,而在手机上又能显示,只需把上面的方法用在PC页面上的CSS文件上。

  5、图片的自适应 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

  这只要一行CSS代码:
  img { max-width: 100%;}
  这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
  img, object { max-width: 100%;}

  6、关于网上一些教程的补充:

  ①、字体大小:一般用两个CSS文件,让屏幕选择加载那种,字体可以按自己的来,反正自己看的舒服就行,当然也可以按相对大小来显示。

  字体使用相对大小(em)。
  body {
    font: normal 100% Helvetica, Arial, sans-serif;
  }
  上面的代码指定,字体大小是页面默认大小的100%,即16像素。
  h1 {
    font-size: 1.5em; 
  }
  然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
  small {
    font-size: 0.875em;
  }
  small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

  ②、IE8及其更低版本不支持media query,可以使用 media-queries.js或 respond.js脚本实现支持,反正我是没鸟这东西,在IE下打开按了下F12选择了下IE7和IE8模式都正常,IE6就没这个选项了。