PWA(Progressive Web Application)计算机开发尝试【HTML和CSS篇】【一】

Image by Pexels from Pixabay

申明

什么是PWA？

这里简单介绍一下什么是PWA，Progressive Web Application缩写就是PWA，根据我自己的理解PWA是Web App的升级版。Web App已经非常普及，我们日常通过浏览器登入的Gmail或Outlook这些都是Web App，外面公司日常处理工事的软件很多都是基于Web App开发而成。PWA想要提供类似Native App的使用体验，离线依旧能提供一些功能、通知推送、读写系统文件和访问设备上的硬件，例如：蓝牙，USB设备和感应器等。

对于开发者来说，PWA继承了Web App的跨平台特性，只需要系统上的浏览器支持，就能正常使用。同一个代码库，更容易管理。而且，PWA可以即时更新，浏览器只需重新加载，用户就能即时看到更新。目前最大的缺点是不同平台上对PWA的支持并不一致，各各平台有自己的支持程度（详情可以点：这里）。

目标

在界面方面的目标，只是要一个正常的计算机界面，“借鉴”了iPhone上的计算机的界面。

开发界面

    gird-template-columns：auto；
    gird-template-rows：100px；
  

    gird-template-columns：auto auto；
    gird-template-rows：100px 100px；
  

    gird-template-columns：auto auto；
    gird-template-rows：100px 100px 100px；
  

有一点需要注意，最上面那一排是显示输入号码和计算结果，这里为了让号码可以在那一排右下角显示。在最外面<div>设Positive为relative，内部的<span>设positive为absolute，再通过right和bottom调整，可以参考CSS内result-row和result-value的class。

另外，CSS内declare variable算是我第一次使用。在:root内declare这是Global的CSS Variable。所以，我在:root内declare和initial了几个颜色的variable，下面直接写var（--gray）就好。

实际界面如下：

我是抄iPhone的计算机UI啦。

最后，我自己对这个界面还算满意（我标准低啦），responsive也还可以。不过必须说，上面提到Chris Diana的pwa-calculator，这个项目的responsive做的非常好，极限小的情况下界面依旧可以使用。基本上界面就到这里，下一篇会着重在Javascript方面。

代码如下：

HTML：

CSS: