猫灿先生博客,简约即美
« 上一篇: 下一篇: »

建立自适应移动互联网站点

猫灿先生  |  2013 年 03 月 05 日  |  位置: »

Responsive Web Design

上篇文章提到移动互联网的重要性,手机上网的行为越来越普遍,如何改进原有网站设计,使之在移动设备上显示优美,交互迅速,给访客带来优秀的体验,成为一个关注的热点。将一个原本只适应电脑显示的网站改版成移动客户端友好界面,通常有三种方法:

1.站点采用自适应网站设计。无论采用什么设备访问这个网站,都是通过同一个URL,下载相同的HTML+CSS,然后通过CSS判断屏幕的大小,按照设定好的规则布局。这是当前主流趋势,是Google最推荐的方式

2.无论采用什么设备访问这个网站,还是通过同一个URL,不过通过一些判断,针对不同设备加载的HTML+CSS是不一样的,尽量不增加冗余code

3.对于移动设备采用专门的独立设计,如原站为abc.com,为移动用户专门设计了m.abc.com,访问URL不同。

这三种方式都各自存在优点缺点,了解后选择适合网站情况的方案。当前Bamboo Talk!采用第二种方式,判断出移动用户来访则采用一套新主题。Maocan.com首页采用第一种方式重新设计了CSS,本文重点探讨一下。

自适应网站设计

这篇日志的开始附图就是Google自适应网站设计的一个Demo,直观来看,当屏幕宽度变窄时,网页会实时判断出当前屏幕宽度,按照CSS设定进行调整重新排版,使页面美观,不包含横向滚动条。完全相同的HTML和CSS传送给每一个客户端,至于布局的规则全部写在CSS里。这样的改进是可以让Google感知到的,而且Googlebot不需要重复收录网站的多个版本,是搜索引擎友好的。对设计者而言,只要做CSS调整,维护不会复杂。对于移动客户端,页面不需要进行任何跳转,提高浏览器执行效率。

Media Queries

首先谈media type,从CSS2开始就有了,media type允许你定义以何种媒介来提交文档,具体采用@media 语句,使用不同的样式规则来针对不同的媒介,来看一个简单的例子:

@media screen { #main {font-weight:normal;} } /*在网页显示字体正常*/
@media print { #main {font-weight:bold;} } /*打印网页时字体加粗*/

常用的media type值包括screen(用于电脑显示器),print(用于打印机),projection(用于方案展示,比如幻灯片)等。

media query是CSS3里面对media type功能的加强,支持更多的判断,更好区分CSS的不同用处。一般而言主流的手机屏幕宽度小于480px,比如我在用的HTC是480*800,ipad是1024*768,数值固定,理解这些实际的尺寸数据就好进行下一步的操作了。

先声明一下,采用media query要加入一个<meta>标签保证页面正常显示:

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

Google对于不同的设备media query是这样设置的:

@media screen and (max-width:480px) {
/* 检测到智能手机(纵向浏览),载入这里的CSS */}
@media screen and (min-width:480px) and (max-width:800px) {
/* 检测到智能手机(横向浏览)、平板电脑(纵向浏览),载入这里的CSS */}

当前主流的浏览器对media queries的支持情况:

media query

因为重点面向移动客户,Safari,Chrome和Android是大家关注的重点,这里可以看到都是支持的。media query的应用也存在一定问题,比如所有样式写在一个CSS里时,不是所有样式都同时起作用,造成了多余的加载。一个解决方法是,针对不同设备的CSS,写在不同的文件里,然后按需加载,举一个具体实例供参考:

<link href="mobile.css" media="screen and (max-width:480px)" />
<!--设备尺寸符合一定条件则加载相应CSS-->

另外,针对手机访问者,一些大的图像、javascript按钮等可能会需要隐藏从而保证布局正常,即采用display:none;这样的形式,然而这些隐藏的资源还是需要下载的,无形中增加不必要的下载。这时本文上面提到的第二种移动化方式会有一定优势,避免过多文件加载。如果需要针对某种特定的移动设备(如iphone5)设计网页,可以参考这个网站来写@media语句,Media Query Snippets

总结

media queries属性众多,功能很强大,本文不一一展示,可以参考W3C官方介绍详细了解。制作自适应网站不仅要设计好CSS,还要依靠合理的HTML框架,建议大家如果阅读后有一些新收获,可以试着运用新知识打造一个移动互联网站点。最后补充一点,如果站点访问量不错,那还是做一个应用,会更友好。

日志信息 »

® 文章信息:本篇日志于 2013年03月05日 17:16 发表在分类 "设计 Design"
™ 本文标签:, , , ,
© 声明信息:本作品采用 license 协议进行许可,转载请注明来自"Bamboo Talk!"
喜欢本文,那就收藏到 :

“建立自适应移动互联网站点” 当前有1条评论 »

发表您的评论




    添加表情    发布自定义图片
a b c d e f g h i j k l m n o p q r s t u v w x y z
(Ctrl+Enter快速提交) 如何设置头像?
0

-->
Bamboo Talk! is Mr. Maocan's private blog. Hope you enjoy your every visit here!