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

最新推荐文章于 2025-07-01 14:55:14 发布

原创最新推荐文章于 2025-07-01 14:55:14 发布 · 6.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#wev #webapp

web前端同时被 2 个专栏收录

16 篇文章

订阅专栏

app

1 篇文章

订阅专栏

本文深入探讨了WebApp的开发与布局技术，包括WebApp的优势与局限性，像素单位的理解，viewport的最佳使用方法，以及灵活运用CSS的弹性盒子布局实现页面的水平垂直居中与自适应显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了前端知识，当然是不能错过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.youkuaiyun.com/detail/qq_19558705/9328477

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