移动端WebApp自适应实践
2016-09-25 09:46
190 查看
为什么要写这个
以前写过关于WebApp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本。虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧!
该示例github地址:https://github.com/iwangx/WebApp
访问地址:https://csssprite.herokuapp.com/
准备
psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,当然这个psd是网上下的
css雪碧图制作工具:最新版(v4.3)能够将多张图片拼接成一张图片并且生成代码的小程序(本人自主研发)
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:底部导航
第六步、生成雪碧图
利用雪碧图生成工具:生成雪碧图,并且生成代码:
将代码copy到css目录中的app.scss目录下。
当然前提是要引入size这个里面方面变量的文件,要不然$_*就没法识别而报错了。
第七步、页面以及css编码
css代码:
html代码:
用到图片的地方,主要有两个class,一个是雪碧图的class,一个就是他本事引用的class,二者结合
大家可以看到css代码中的大小全都是$_*,也就是测量出来的大小,包括字号也是
这样就构成了我们的WebApp。
iPhone5上是这样
iPhone6上是这样
平板上是这样
结语
希望这个博客对大家有帮助,尤其是新手,也希望大家多提意见。
以前写过关于WebApp自适应屏幕的文章(链接),不过写的大多数群众看不懂,所以来个图文并茂的版本。虽然只是一个简单的页面,不过在做的过程中也遇到了一些问题,也算是好事吧!
该示例github地址:https://github.com/iwangx/WebApp
访问地址:https://csssprite.herokuapp.com/
准备
psd:这个是最重要的东西,用于测量尺寸,以及切图,我是不太同意切图的工作交给ui,自己切比较好,psd的分辨率我做的是640px的宽度,当然这个psd是网上下的
css雪碧图制作工具:最新版(v4.3)能够将多张图片拼接成一张图片并且生成代码的小程序(本人自主研发)
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:底部导航
第六步、生成雪碧图
利用雪碧图生成工具:生成雪碧图,并且生成代码:
将代码copy到css目录中的app.scss目录下。
当然前提是要引入size这个里面方面变量的文件,要不然$_*就没法识别而报错了。
第七步、页面以及css编码
css代码:
用到图片的地方,主要有两个class,一个是雪碧图的class,一个就是他本事引用的class,二者结合
大家可以看到css代码中的大小全都是$_*,也就是测量出来的大小,包括字号也是
这样就构成了我们的WebApp。
iPhone5上是这样
iPhone6上是这样
平板上是这样
结语
希望这个博客对大家有帮助,尤其是新手,也希望大家多提意见。
相关文章推荐
- 移动端webapp自适应实践(css雪碧图制作小工具实践)图文并茂
- 移动端webapp自适应布局
- 移动端开发-WebApp-淘宝商城(响应式布局:任何手机屏幕尺寸自适应)
- 移动端屏幕自适应布局
- 移动端rem布局实践
- 百度地图Web组件APIV1.0 webapp开发利器 实践
- 结合mint-ui移动端下拉加载实践总结
- 移动端图标的自适应问题
- WebApp移动端前端UI库
- 关于移动端自适应大小(rem)————(autosize.js)
- Js动态设置rem来实现移动端字体的自适应代码
- 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible
- 定宽网页设计下,固定宽度布局开发WebApp并实现多终端下WebApp布局自适应
- 粗浅看 移动端的WebApp发展之H5的无限活力
- 浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
- vw实现移动端自适应页面
- js 解决移动端自适应屏幕
- 从原理到方案,一步步讲解web移动端实现自适应等比缩放
- pc、移动端 自适应布局方案
- 图片流量节省60%:基于CDN的sharpP自适应图片技术实践