学习了前端知识,当然是不能错过web app的学习咯。
什么是web app
是指基于Web的系统和应用,需要技术有html5,css3,javascript,
优点:
1.开发成本低
2.适配多种移动设备成本低
3.跨平台和终端
4.迭代更新容易
5.无需安装成本
缺点:
1、WebApp自身能力不全面
2、无法调用语音、摄像头、定位等能力,体验比较差;
3、用户很难沉淀下来,建立较为稳固的联系。
像素
px:逻辑像素,一般为浏览器使用的单位
dp,pt:物理像素,与设备无关
dpr:像素比,
计算公式: 1px = (dpr)^2 * dp
ppi:ppi越高图像越清晰,但可视度越高,放缩比越低,所以出现了高清的屏幕,图标偏小的现象。
ppi为240的其dpr是1.5;320的是2.0;更高的就大于2.0了
viewport视图
visual viewport:窗口viewprot,
layout viewport:布局viewport,常用
viewport最佳meta标签:
<meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta>
width:设置viewport的值,如device-width是设备宽度
initial-scale:初始缩放,最好为1
minimum-scale:最小缩放
maximun-scale:最大缩放
user-scalabel:用户能否缩放,一般为no
我们用一款手机做例子,分辨率为1334*750
准备一张分辨率也为1334*750的图片,看看效果
明明就是一样的分辨率,为什么拖拽图片后出现空白区域,原因就是px和dp,dpr的关系,
使用viewport最佳mate后效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta>
<title>hello world</title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<img src="img/bg.jpg" width="750" height="1334" />
</body>
</html>
flexbox弹性盒子布局
使用方法,父元素定义使用弹性布局display:-webkit-flex;
子元素设置缩放比如 flex:num;
不定宽高水平垂直居中
justify-content:center;
align-items:center;
display:-webkit-flex;
效果图:
代码:(打开注解可以看到更多的效果,至于美观需要自己微调)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta>
<title>hello world</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: "微软雅黑";font-size: 14px;color: #fff;}
li{text-decoration: none;float: left;display: block;width:100%;}
/*flex start*/
.flex{
display: -webkit-flex;
flex-direction:row;/*默认*/
/*flex-direction:row-reverse;横线逆序*/
/*flex-direction:column; 垂直*/
/*flex-direction:column-reverse;垂直逆序*/
justify-content:center;/*垂直居中*/
/*flex-start,flex-end,space-between,space-around*/
align-items:center;/*水平居中*/
/*flex-start,flex-end,baseline,stretch*/
/*align-content:flex-start;
flex-end,baseline,stretch,space-between,space-around*/
}
.flex .item1{width:100px;background-color:green;}
.flex .item2{flex:2;background-color:cornflowerblue;}
.flex .item3{flex:1;background-color:#EFA198;}
/*flex end*/
/*flex-row start*/
.flex-wrap{
display: -webkit-flex;
-webkit-flex-wrap: nowrap;/*默认不溢出*/
/*-webkit-flex-wrap: wrap;溢出*/
/*-webkit-flex-wrap: wrap-reverse;逆序溢出*/
width: 400px;
}
.flex-wrap .item1{width:100px;background-color:green;}
.flex-wrap .item2{width:200px;background-color:cornflowerblue;}
.flex-wrap .item3{width:300px;background-color:#EFA198;}
/*flex-row end*/
</style>
</head>
<body>
<h2>Flex弹性布局</h2>
<div class="demo1">
<ul class="flex">
<li class="item1">设置固定宽度</li>
<li class="item2">flex: 2;</li>
<li class="item3">flex: 1;</li>
</ul>
</div>
<br />
<div class="demo2">
<ul class="flex-wrap">
<li class="item1">width:100px</li>
<li class="item2">width:200px</li>
<li class="item3">width:300px</li>
</ul>
</div>
</body>
</html>
该资源中还有很多布局,下载地址:http://download.csdn.net/detail/qq_19558705/9328477
更多干货等你来拿 http://www.itit123.cn/