开发html标准，写给前端开发的WebApp（端）参考规
范【原创】
写给前端开发的Web App(端)参考规范
Web App也就是我们常说的“端”，是App开发的三种模式：Native App、Web App、Hybrid App之⼀。
简单介绍下这三种开发模式：
1.Native App，原⽣APP，使⽤原⽣(即Android或iOS)开发的APP。
代码转换
2.所谓的Web App，就是把⼿机当做⼀个浏览器(Android使⽤WebView，iOS使⽤UIWebView)，做⼏个页⾯挂在服务器端，类似于⼀个⼩⽹站。
3.Hybrid App是综合了Web App的开发速度和Native App的⾼性能体验的⼀种混合型开发模式；
在这段时间的⼯作中，我发现在与开发⼈员的对接过程中，虽然Android和iOS的开发成本和开发难度都⽐web app要⼤，但由于Native App原⽣开发的规范性与适配性⽐较⾼，且性能稳定，体验性强，在设计的落实过程中反⽽⽐web app 的完成度要⾼，因此在此就不再赘述。
然⽽⽹上对于web app开发规范的资料并不多，下⾯是我总结的web app的开发中的⼀些规范和建议，可能不够详实，希望能够为⼤家起到⼀点帮助：
1.开发尺⼨问题：对于全平台的APP设计，我们通常以Android720*1280px的标准来做设计⽅案，然⽽web app的开发中并不能直接⽤720*1280px这样的尺⼨进⾏搭建。
原因如下：
设备像素和CSS像素⼀般使⽤px作为单位，并且在桌⾯浏览器的100%缩放情况下，css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的⼀个错觉，那就是css中的像素就是设备的物理像素。
但实际情况却并⾮如此，css像素只是⼀个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素的长度是不同的。在为桌⾯浏览器设计的⽹页中，我们⽆需对这个津津计较，但在移动设备上，必须弄明⽩这点。即：
css中的1px并不是总代表设备像素上的1px，尤其是在移动设备上。
这也就是为什么不能直接拿720*1280px作为开发尺⼨的原因！因为我们的720*1280是物理像素，⽽web app使⽤的是逻辑像素；
因此，我们的设计尺⼨720*1280px对应到开发中的代码尺⼨应该为340*640px，对应的iPhone6(750*1334)的开发尺⼨为
375*667px,iPhone6p(1080*1920px)……
2.其他控件的对应⾼度
3.⽂字⼤⼩
由于web⽹页的⾃适应问题，⽂字在代码中的单位⼀般采⽤em的单位，需要进⾏两次转换，
1em 等于当前的字体尺⼨。
2em 等于当前字体尺⼨的两倍。
例如，如果某元素以 12pt 显⽰，那么 2em 是24pt。
打赏
⽀付宝打赏
感谢您对作者Sherry的打赏，我们会更加努⼒！    如果您想成为作者，请点我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。