移动端WebApp自适应实践（图文并茂）
招聘信息：
为什么要写这个以前写过关于WebApp自适应屏幕的文章（），不过写的大多数群众看不懂，所以来个图文并茂的版本。虽然只是一个简单的页面，不过在做的过程中也遇到了一些问题，也算是好事吧！该示例github地址：访问地址：准备psd：这个是最重要的东西，用于测量尺寸，以及切图，我是不太同意切图的工作交给ui，自己切比较好，psd的分辨率我做的是640px的宽度，当然这个psd是网上下的css雪碧图制作工具：最新版（）能够将多张图片拼接成一张图片并且生成代码的小程序（本人自主研发）webstorm：前端开发利器马克曼：前端尺寸颜色测量工具photoshop：切图利器sass：css预编译工具第一步、切图我用的是photoshop切的图，切图如下：当然可能看不太清楚，毕竟是白色的图第二步、搭建框架大体结构就是这个，地址：第三步、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代码：@import&"size";
//所有图片变量
@mixin&sprite{background:url(../images/sprite.png)&no-repeat&;background-size:$_138&$_163;}
@mixin&icon_right{height:$_59;width:$_59;background-position:0&-$_75&0&-$_5;}
@mixin&icon_left{height:$_59;width:$_59;background-position:0&0;}
@mixin&icon_tag{height:$_44;width:$_65;background-position:0&-$_1&0&-$_119;}
@mixin&icon_person{height:$_44;width:$_65;background-position:0&0&-$_66;}
@mixin&icon_book{height:$_44;width:$_65;background-position:0&-$_73&0&-$_71;}
@mixin&icon_more{height:$_44;width:$_65;background-position:0&-$_73&0&-$_119;}
body{background:&#fbfbfb}
.sprite{@include&}
.header{position:&background:&#dd3131;height:&$_90;line-height:&$_90;;width:&100%;left:&0;top:&0;font-size:&$_40;color:&#text-align:&
&&button{position:&top:&$_16;border:&$_2&solid&#border-radius:&50%;box-sizing:&content-box}
.btn-left{@include&icon_left:&$_16;}
.btn-right{@include&icon_right:&$_16;}
.nav{display:&-webkit-position:&left:&0;top:&$_90;color:&#3d3d3d;font-size:&$_30;width:&100%;border-bottom:&$_1&solid&#e7e5e6;
&&a{display:&height:&$_60;line-height:&$_60;text-align:&background:&#-webkit-box-flex:&1;border-right:&$_1&solid&#e7e5e6;box-sizing:&border-}
.controller{padding:&$_151&0&$_100&0;}
&&li{border-bottom:$_1&solid&#cfcfcf&}
&&a{display:&-webkit-padding:&$_16;}
&&img{height:&$_122;width:&$_122;display:&block}
.list-right{-webkit-box-flex:&1;padding-left:&$_15;
&&h1{color:ȫfont-size:&$_24;}
&&p{color:󖣃font-size:&$_18;margin-top:&$_15;line-height:&1.5}
.footer{height:&$_100;position:&left:&0;bottom:&0;width:&100%;display:&-webkit-background:&#4a4a4a;text-align:&
&&a{display:&-webkit-box-flex:&1;box-sizing:&border-padding-top:&$_10;border-right:&$_1&solid&#
&&&&&:last-child{border-right:&none}
&&i{display:&margin:&0&auto}
&&span{color:&#font-size:&$_24;display:&margin-top:&$_5;}
.icon_book{@include&icon_book}
.icon_tag{@include&icon_tag}
.icon_person{@include&icon_person}
.icon_more{@include&icon_more}html代码：用到图片的地方，主要有两个class，一个是雪碧图的class，一个就是他本事引用的class，二者结合大家可以看到css代码中的大小全都是$_*，也就是测量出来的大小，包括字号也是这样就构成了我们的WebApp。iPhone5上是这样iPhone6上是这样平板上是这样结语希望这个博客对大家有帮助，尤其是新手，也希望大家多提意见。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量9497点击量6606点击量6137点击量3812点击量3600点击量3566点击量2919点击量2623点击量2381
&2016 Chukong Technologies,Inc.
京公网安备89友情提示：垃圾评论一律封号...
css3自适应手机端焦点图banner特效代码
所需积分：20
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折。
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值
用户名/邮箱
两周内免登录
绑定送30积分查看: 8587|回复: 10
用 jquery molibe
框架做手机网页。如何让里面的图片自适应...
主题帖子积分
用 jquery molibe&&框架做手机网页。如何让里面的图片自适应大小
主题帖子积分
高级会员, 积分 548, 距离下一级还需 452 积分
高级会员, 积分 548, 距离下一级还需 452 积分
用流式布局& & .gallery li img {& &&&display:& &&&height:& &&&width: 100%; }
主题帖子积分
注册会员, 积分 116, 距离下一级还需 84 积分
注册会员, 积分 116, 距离下一级还需 84 积分
这是什么东东啊
主题帖子积分
注册会员, 积分 198, 距离下一级还需 2 积分
注册会员, 积分 198, 距离下一级还需 2 积分
学习了，谢谢分享、、、
主题帖子积分
这是东东好,支持一下 感谢楼主 好资源收藏了
主题帖子积分
注册会员, 积分 198, 距离下一级还需 2 积分
注册会员, 积分 198, 距离下一级还需 2 积分
帮帮顶顶！！
主题帖子积分
注册会员, 积分 60, 距离下一级还需 140 积分
注册会员, 积分 60, 距离下一级还需 140 积分
找到好贴不容易，我顶你了，谢了
主题帖子积分
新手上路, 积分 12, 距离下一级还需 38 积分
新手上路, 积分 12, 距离下一级还需 38 积分
学习了，谢谢分享
主题帖子积分
新手上路, 积分 26, 距离下一级还需 24 积分
新手上路, 积分 26, 距离下一级还需 24 积分
多谢，学习
主题帖子积分
新手上路, 积分 26, 距离下一级还需 24 积分
新手上路, 积分 26, 距离下一级还需 24 积分
多谢学习了
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered by当前位置： >
jQuery自适应屏幕宽度手机焦点图
特效说明：
一款jQuery自适应屏幕宽度（分辨率）手机焦点图，只适应各种手机屏幕分辨绿焦点图切换网页特效。透明渐变切换，应用简单。支持屏幕旋转自适应焦点图、幻灯片特效。（兼容测试：宽度大于320px手机、移动设备等浏览器）
使用方法：
1、调用CSS样式：
&link href=&css/style.css& rel=&stylesheet& type=&text/css&&
2、调用JS插件代码：
&script src=&js/jquery.js& language=&javascript& type=&text/javascript&&&/script&
&script type=&text/javascript& src=&js/jquery.SuperSlide.js&&&/script&
3、添加HTML代码：
将&!--效果html开始--&......&!--效果html结束--&之间的html和js代码；放在&body&&/body&之间。
一款jQuery自适应宽屏带动画焦点图网页特效，自动播放图片特效，点击左右箭头按钮、底部切换按钮带动画图文切换jQuery焦点图代码下载。……
一款手机移动端响应式全屏左右可拖拽焦点图幻灯片网页特效，动态加载对应的文字内容 当然，它也是支持鼠标拖拽功能，带左右按钮，自动轮播及左右拖拽或点击按钮切换焦点图JS代……
一款jQuery带动画效果自动轮播焦点图网页特效免费下载，该特效带动画效果，左右按钮、索引按钮切换代码，效果非常流畅，兼容IE7，插件支持图片位置的定位以及图片的动画运行速度……
一款jQuery手机触屏左右滑动切换焦点图特效代码免费下载，该焦点图特效支持触屏滑动切换大图，做微信网站或手机方面的webapp网页必备素材代码，有需要的朋友参考下。……
jQuery手机移动端图片触屏滑动焦点图网页特效，该特效基于jquery.event.drag-1.5.min.js、 jquery.touchSlider.js和jquery-1.7.1.min.js等插件制作的图片轮播特效代码，兼容PC端和手机移动端，全屏宽屏……
一款jQuery+html5触屏手机移动端焦点图特效，可点击左右按钮平滑切换图片；可触屏或鼠标拖动左右平滑切换焦点图相册特效。移动端、手机触屏JS焦点图代码免费下载。……
一款兼容PC端/手机移动端可左右滑动（拖动）焦点图网页特效，可自适应宽度、可用鼠标左右拖动切换图片、可在触屏移动设备上左右滑动切换图片；移动端、触屏设备web前端开发必备……
一款jQuery手机响应式设计焦点图网页特效代码，自适应宽屏焦点图，支持左右按钮点击切换，支持添加文字标题。更多焦点图代码请访问科e互联JS代码频道。……
一款带触摸移动端焦点图轮播代码网页特效，PC端自动轮播焦点图、移动端、手机端触摸滑动切换焦点图代码素材。手机端网站制作特效代码。……
一款jQuery自适应全屏带导航的焦点图代码，图文分离、背景分离，酷似HTML5+CSS3特效。网页制作、网站建设js代码网页素材。……
最新更新特效
本站关键词
科e互联版权所有
京ICP备号-1}