学习了前端知识,当然是不能错过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/
文章来源:http://blog.csdn.net/qq_19558705/article/details/50180553