您的位置：首页 > 移动开发 > WebAPP

移动端webapp自适应实践（css雪碧图制作小工具实践）图文并茂

2015-05-26 09:32 344 查看

为什么要写这个

以前写过关于webapp自适应屏幕的文章（链接），不过写的大多数群众看不懂，所以来个图文并茂的版本。虽然只是一个简单的页面，不过在做的过程中也遇到了一些问题，也算是好事吧！

该示例github地址：https://github.com/iwangx/WebApp

访问地址：https://csssprite.herokuapp.com/

准备

psd：这个是最重要的东西，用于测量尺寸，以及切图，我是不太同意切图的工作交给ui，自己切比较好，psd的分辨率我做的是640px的宽度，当然这个psd是网上下的

css雪碧图制作工具：最新版（v4.3）能够将多张图片拼接成一张图片并且生成代码的小程序（本人自主研发）

webstorm：前端开发利器

马克曼：前端尺寸颜色测量工具

photoshop：切图利器

sass：css预编译工具

第一步、切图

我用的是photoshop切的图，切图如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui">
<meta name="author" content="wangxing">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="format-detection" content="telephone=no">
<title>app自适应</title>
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/app.css">
<script src="/js/lib/resize.js"></script>
</head>
<body>
<header class="header">
<button class="sprite btn-left"></button>
<span>远程酒业</span>
<button class="sprite btn-right"></button>
</header>
<nav class="nav">
<a href="javascript:;">资讯</a>
<a href="javascript:;">产品</a>
<a href="javascript:;">实战</a>
<a href="javascript:;">讨论</a>
</nav>
<section class="controller">
<ul class="list">
<li>
<a href="#">
<img src="src" alt="图片">
<div class="list-right">
<h1>酒名字</h1>
<p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="src" alt="图片">
<div class="list-right">
<h1>酒名字</h1>
<p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="src" alt="图片">
<div class="list-right">
<h1>酒名字</h1>
<p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="src" alt="图片">
<div class="list-right">
<h1>酒名字</h1>
<p>提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……</p>
</div>
</a>
</li>
</ul>
</section>
<footer class="footer">
<a href="#">
<i class="sprite icon_book"></i>
<span>资讯</span>
</a>
<a href="#">
<i class="sprite icon_tag"></i>
<span>产品</span>
</a>
<a href="#">
<i class="sprite icon_person"></i>
<span>实战</span>
</a>
<a href="#">
<i class="sprite icon_more"></i>
<span>讨论</span>
</a>
</footer>
</body>
</html>

View Code
用到图片的地方，主要有两个class，一个是雪碧图的class，一个就是他本事引用的class，二者结合

大家可以看到css代码中的大小全都是$_*，也就是测量出来的大小，包括字号也是

这样就构成了我们的webapp

iphone5上是这样

iphone6上是这样

平板上是这样

结语

希望这个博客对大家有帮助，尤其是新手，也希望大家多提意见

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航