web app 入门教程

最新推荐文章于 2024-05-25 08:37:19 发布

如辇

最新推荐文章于 2024-05-25 08:37:19 发布

阅读量1.3k

点赞数

分类专栏： it; 文章标签： web app it 手机

it; 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习了前端知识，当然是不能错过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标签：

[html]view plaincopy 
    
 <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后效果

[html]view plaincopy 
    
 <!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;

不定宽高水平垂直居中

[html]view plaincopy 
    
 justify-content:center;  
 align-items:center;  
 display:-webkit-flex;  

几个常用的布局：

效果图：

代码：（打开注解可以看到更多的效果，至于美观需要自己微调）

[html]view plaincopy 
    
 <!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

如辇

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web app 入门教程

学习了前端知识，当然是不能错过web app的学习咯。什么是web app是指基于Web的系统和应用，需要技术有HTML5，CSS3，JavaScript，优点：1.开发成本低2.适配多种移动设备成本低3.跨平台和终端4.迭代更新容易5.无需安装成本缺点：1、WebApp自身能力不全面2、无法调用语音、摄像头、
复制链接

扫一扫

专栏目录