新手入门10分钟看懂Webapp是什么-职坐标

新手入门10分钟看懂Webapp是什么

白羽 2018-06-19 来源：网络阅读 4388 评论 0

摘要：本文将带你了解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

width：设置viewport的值，如device-width是设备宽度

initial-scale：初始缩放，最好为1

minimum-scale：最小缩放

maximun-scale：最大缩放

user-scalabel：用户能否缩放，一般为no

我们用一款手机做例子，分辨率为1334*750

准备一张分辨率也为1334*750的图片，看看效果

新手入门10分钟看懂Webapp是什么

明明就是一样的分辨率，为什么拖拽图片后出现空白区域，原因就是px和dp，dpr的关系，

使用viewport最佳mate后效果

新手入门10分钟看懂Webapp是什么

[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频道！

app应用开发 app开发入门桌面应用开发

本文由 @白羽发布于职坐标。未经许可，禁止转载。