web app 入门教程第一章基础知识

矫情吗；* 2022-08-18 02:13 209阅读 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标签：

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

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

minimum-scale：最小缩放

maximun-scale：最大缩放

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

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

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

![SouthEast][]

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

使用viewport最佳mate后效果

![SouthEast 1][]

<!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;

几个常用的布局：

效果图：

![SouthEast 2][]

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

<!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_download.csdn.net_detail_qq_19558705_9328477]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[SouthEast]: /images/20220731/639e1e732403403481e5ffb1c1d46820.png
[SouthEast 1]: /images/20220731/e8e98ab8a3f14d91b206cc6517150a83.png
[SouthEast 2]: /images/20220731/47491530e113481ebe2032b4c7bbfb81.png
[http_download.csdn.net_detail_qq_19558705_9328477]: http://download.csdn.net/detail/qq_19558705/9328477
[http_www.itit123.cn]: http://www.itit123.cn/