响应式网页设计和移动互联网

作者佚名技术来源 CSS技术浏览发布时间 2012-02-22

HTML代码：

<div class="flex_wrap">
	<div class="flex_hd">前端观察</div>
	<div class="flex_bd">
		<p>这里是主内容区</p>
		<p>这里是主内容区</p>
	</div>
	<div class="flex_ft">
		<a href="http://www.qianduan.net/about" title="关于我们">关于我们</a>
		<a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a>
		<a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a>
	</div>
</div>

虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。

不足之处

如果你关注网站性能之类的话，可能已经发现了一些问题：

加载很多不需要的资源，比如多余的图片和样式内容
带宽限制
移动终端的内存和CPU限制
图片大小和屏幕大小不匹配

嗯，任何一个方案都不是完美的，但也不会很糟糕。下面我们会提到一些可行的优化方案：

HTML5本地存储

对于支持HTML5 appcache /manifest特性的浏览器，我们可以将一些不常改动的静态资源存储到本地，比如css文件，css中用到的图片，以及一些js文件等：

CACHE MANIFEST
NETWORK:
/*
 
CACHE:
img/bg.jpg
img/days.otf
slideshow.js
slideshow.css
classList.js

然后将文件保存为manifest格式，并在HTML标签中引入即可：

<html manifest="responsive.manifest">

这样，用户在第一次访问的时候会慢一点儿，但是后续访问会很快，3G网络中也能为用户节省带宽。

移动设备优先

一种新的设计流程是，先为移动设备设计界面，然后将PC端作为

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 网页进度条设计:全兼容且自适应的进度条下一篇: 介绍-webkit-filter：-webkit-filter是什么

关于响应式网页设计和移动互联网的所有评论

随机推荐