移动端WebApp自适应实践
来源:互联网 发布:淘宝销售宣传标语 编辑:程序博客网 时间:2024/06/05 20:00
为什么要写这个
以前写过关于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代码:
@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 sprite;}
.header{
position
:
fixed
;
background
:
#dd3131
;
height
: $_
90
;
line-height
: $_
90
;;
width
:
100%
;
left
:
0
;
top
:
0
;
font-size
: $_
40
;
color
:
#fff
;
text-align
:
center
;
button{
position
:
absolute
;
top
: $_
16
;
border
: $_
2
solid
#fff
;border-radius:
50%
;box-sizing: content-box}
}
.btn-
left
{@include icon_left;
left
: $_
16
;}
.btn-
right
{@include icon_right;
right
: $_
16
;}
.nav{
display
: -webkit-box;
position
:
fixed
;
left
:
0
;
top
: $_
90
;
color
:
#3d3d3d
;
font-size
: $_
30
;
width
:
100%
;
border-bottom
: $_
1
solid
#e7e5e6
;
a{
display
:
block
;
height
: $_
60
;
line-height
: $_
60
;
text-align
:
center
;
background
:
#fff
;-webkit-box-flex:
1
;
border-right
: $_
1
solid
#e7e5e6
;box-sizing: border-box;}
}
.controller{
padding
: $_
151
0
$_
100
0
;}
.list{
li{
border-bottom
:$_
1
solid
#cfcfcf
}
a{
display
: -webkit-box;
padding
: $_
16
;}
img{
height
: $_
122
;
width
: $_
122
;
display
:
block
}
}
.list-
right
{-webkit-box-flex:
1
;
padding-left
: $_
15
;
h
1
{
color
:
#555
;
font-size
: $_
24
;}
p{
color
:
#878787
;
font-size
: $_
18
;
margin-top
: $_
15
;
line-height
:
1.5
}
}
.footer{
height
: $_
100
;
position
:
fixed
;
left
:
0
;
bottom
:
0
;
width
:
100%
;
display
: -webkit-box;
background
:
#4a4a4a
;
text-align
:
center
;
a{
display
:
block
;-webkit-box-flex:
1
;box-sizing: border-box;
padding-top
: $_
10
;
border-right
: $_
1
solid
#fff
;
&:last-child{
border-right
:
none
}
}
i{
display
:
block
;
margin
:
0
auto
}
span{
color
:
#fff
;
font-size
: $_
24
;
display
:
block
;
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上是这样
平板上是这样
结语
希望这个博客对大家有帮助,尤其是新手,也希望大家多提意见。
- 移动端WebApp自适应实践
- 移动端webapp自适应布局
- WebApp最佳实践之移动可用性提升
- 移动端开发-WebApp-淘宝商城(响应式布局:任何手机屏幕尺寸自适应)
- 移动端webapp年度总结
- 移动端webApp兼容问题解决
- 移动端 webapp meta小结
- WebApp最佳实践用户体验篇之移动设计
- WebApp开发-移动端WebApp开发必备知识
- 移动端web 自适应
- 移动端自适应rem
- 移动端自适应方法
- 移动端 图片自适应
- 移动端屏幕自适应
- 移动端自适应
- 自适应移动端
- iFrame 移动端自适应
- 移动端自适应问题
- PHP关于金额数值的处理,number_format()与round()的使用
- 【51Nod算法马拉松18 A】染色问题
- java基础学习总结--操作符
- AFNetworking 3.0 源码解析之Reachability
- Xcode8上传应用包成功后,iTunes里不显示构建版本
- 移动端WebApp自适应实践
- 电路交换、报文交换和分组交换
- 将binaryproto文件转换为npy文件 代码
- 关于activity的直接传递数据【A向B传递数据】
- 【51Nod算法马拉松18 B】非010串
- 各种图片编码格式详解
- hihocode #1385 : A Simple Job
- 周末轻松一刻,欣赏完全由程序自己回忆的视频片段
- python学习之 requests库