-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-26
来源 ：网络
阅读 1232
评论 0
摘要：本文将带你了解Webapp开发之自适应实践，希望本文对大家学WEBAPP有所帮助。
准备
psd：这个是最重要的东西，用于测量尺寸，以及切图，我是不太同意切图的工作交给ui，自己切比较好，psd的分辨率我做的是640px的宽度。
webstorm：前端开发利器
马克曼：前端尺寸颜色测量工具
photoshop：切图利器
sass：css预编译工具
第一步、切图
我用的是photoshop切的图，切图如下：
当然可能看不太清楚，毕竟是白色的图
第二步、搭建框架
大体结构就是这个，地址：https://github.com/iwangx/WebApp
第二部、css结构
css主要采用sass作于预编译的工具，结构如下：
reset.scss文件主要是对于元素样式的重置
app.scss文件是对单个页面样式
size.scss文件里面包含了手机端自适应1-400尺寸的变量
第二步、js结构
js中最重要的是自适应的的代码，地址：移动端自适应，zepto这些都没有引入，因为只是个简单的示例
第三步、html页面机构
页面结构如下图：
header：头部标题
nav：头部的导航
controller：中间列表
footer：底部导航
当然前提是要引入size这个里面方面变量的文件，要不然$_*就没法识别而报错了
第五步、页面以及css编码
css代码：
View Code
html代码：
View Code
用到图片的地方，主要有两个class，一个是雪碧图的class，一个就是他本事引用的class，二者结合
大家可以看到css代码中的大小全都是$_*，也就是测量出来的大小，包括字号也是
这样就构成了我们的webapp
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
