摘要:本文将带你了解Webapp是什么,希望本文对大家学WEBAPP有所帮助。
什么是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标签:
[html] view plain copy
1.
width:设置viewport的值,如device-width是设备宽度
initial-scale:初始缩放,最好为1
minimum-scale:最小缩放
maximun-scale:最大缩放
user-scalabel:用户能否缩放,一般为no
我们用一款手机做例子,分辨率为1334*750
准备一张分辨率也为1334*750的图片,看看效果
明明就是一样的分辨率,为什么拖拽图片后出现空白区域,原因就是px和dp,dpr的关系,
使用viewport最佳mate后效果
[html] view plain copy 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta> 6. <title>hello world</title> 7. <style type="text/css"> 8. *{margin: 0;padding: 0;} 9. </style> 10. </head> 11. <body> 12. <img src="img/bg.jpg" width="750" height="1334" /> 13. </body> 14. </html> flexbox弹性盒子布局 使用方法,父元素定义使用弹性布局display:-webkit-flex; 子元素设置缩放比如 flex:num; 不定宽高水平垂直居中 [html] view plain copy 1. justify-content:center; 2. align-items:center; 3. display:-webkit-flex; 几个常用的布局: 效果图: 代码:(打开注解可以看到更多的效果,至于美观需要自己微调) [html] view plain copy 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <meta name = "viewport" content="width=device-width,inital-scale=1,user-scalable=no"></meta> 6. <title>hello world</title> 7. <style type="text/css"> 8. *{margin: 0;padding: 0;} 9. body{font-family: "微软雅黑";font-size: 14px;color: #fff;} 10. li{text-decoration: none;float: left;display: block;width:100%;} 11. /*flex start*/ 12. .flex{ 13. display: -webkit-flex; 14. flex-direction:row;/*默认*/ 15. /*flex-direction:row-reverse;横线逆序*/ 16. /*flex-direction:column; 垂直*/ 17. /*flex-direction:column-reverse;垂直逆序*/ 18. justify-content:center;/*垂直居中*/ 19. /*flex-start,flex-end,space-between,space-around*/ 20. align-items:center;/*水平居中*/ 21. /*flex-start,flex-end,baseline,stretch*/ 22. /*align-content:flex-start; 23. flex-end,baseline,stretch,space-between,space-around*/ 24. } 25. .flex .item1{width:100px;background-color:green;} 26. .flex .item2{flex:2;background-color:cornflowerblue;} 27. .flex .item3{flex:1;background-color:#EFA198;} 28. /*flex end*/ 29. /*flex-row start*/ 30. .flex-wrap{ 31. display: -webkit-flex; 32. -webkit-flex-wrap: nowrap;/*默认不溢出*/ 33. /*-webkit-flex-wrap: wrap;溢出*/ 34. /*-webkit-flex-wrap: wrap-reverse;逆序溢出*/ 35. width: 400px; 36. } 37. .flex-wrap .item1{width:100px;background-color:green;} 38. .flex-wrap .item2{width:200px;background-color:cornflowerblue;} 39. .flex-wrap .item3{width:300px;background-color:#EFA198;} 40. /*flex-row end*/ 41. </style> 42. </head> 43. <body> 44. <h2>Flex弹性布局</h2> 45. <div class="demo1"> 46. <ul class="flex"> 47. <li class="item1">设置固定宽度</li> 48. <li class="item2">flex: 2;</li> 49. <li class="item3">flex: 1;</li> 50. </ul> 51. </div> 52. <br /> 53. <div class="demo2"> 54. <ul class="flex-wrap"> 55. <li class="item1">width:100px</li> 56. <li class="item2">width:200px</li> 57. <li class="item3">width:300px</li> 58. </ul> 59. </div> 60. </body> 61. </html> 本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号