自适应网页前端设计相关

时间:2014-02-18 23:35:10  来源:cnblog  作者:移动互联奇葩

  自适应网页设计,英文名称叫Responsive Web Design.主要目的是为了在大小不同的设备上呈现相同的内容。本人在工作中遇到要用html写一个页面嵌入到android的webview中。这样的web设计起来就和PC 浏览器的web设计不太一样,主要是要考虑到移动设备屏幕分辨率不一样的问题。

  经过我的观察,新浪微博有pad  web 入口,手机 web 入口(两种m.weibo.com和m.weibo.cn),PC web入口,三种不同的前端,维护起来当然比较麻烦,而自适应网页设计做出的网页,一个前端能解决3中入口,当然技术上是有一定难度的。http://bradfrostweb.com/demo/mobile-first/#这个网页就是自适应网页,无论怎么调整浏览器的大小,所有UI都能适当的显示。那么怎么设计这么绚丽的网页呢,如下:

1. 在网页代码的head标签内加入如下代码:

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

其中initial-scale为初始化大小,即原始缩放比例,maximum-scale - 允许用户缩放到的最大比例,user-scalable - 用户是否可以手动缩放。

2. 字体和宽度不是用px

  一般我们设计使用宽度如 width: xxx px; 但是要自适应的话最好改成width: xx % 或者width:auto。字体我们不用px而是使用em来指定字体的大小,具体px和em怎么转换请网上自查。

3. 布局问题

  我们使用流布局:float。好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

4. 加载CSS

  核心思想就是判断屏幕的宽度然后选择就加载相应的CSS文件。具体例子:

  

<link rel="stylesheet" type="text/css"
 media="screen and (max-device-width: 480px)"
 href="mobile.css" />

  以上代码的意思是当屏幕宽度小于480px的时候,加载mobile.css文件。当然屏幕宽度判断也可以是区间。我们也可以直接在CSS中判断需要加载的内容,例如:

@media screen and (max-width: 480px) {
    .div1 {
      float: none;
      width:auto;
    }
    #div2 {
      display:none;
    }
  }

  以上代码意思是,如果屏幕宽度小于480像素,则div1(class)块取消浮动(float:none)、宽度自动调节(width:auto),div2(id)块不显示(display:none)

5. 图片自适应

  img标签的话,只需要设置 max-width: 100%;或width:100%;

  css加载的background-image如何自适应大小呢,其实CSS3中是可以实现的,如下:

style="
    background-image:url(qipa.png);
    background-size:100% 100%;
    -moz-background-size:100% 100%; /* 老版本的 Firefox */
    background-repeat:no-repeat;"

以上代码中加载的qipa.png图片就是可以自适应大小的。

国内各种博客中也发现关于这方面的内容基本都出自同一内容,没有什么大的亮点,其实直接看外国文章是非常好的办法,以下就是国外关于自适应web的博文:

http://www.html5rocks.com/en/mobile/responsivedesign/

讲的非常详细,当然也有人翻译成了中文,想要的可以留下邮箱。

每一个程序猿都是文艺青年!!!


顶一下
返回首页
回首页
收藏
收藏

参与评论(条)

注: 网友评论仅供表达个人看法,并不表达本站同意其观点或证实其描述

当前栏目分类