版权归作者所有，转载请注明出处
简单粗暴的移动WEB前端适配
暑期实习第一次做web前端，所以就避免不了写页面，写样式，其中遇到的最大的问题就是适配问题，目前市面上手机屏幕各异有三星S8的18.5：9，也有黑莓的1：1，如果是做的web app的话还有可能有分屏，小窗口等情况，这种情况要做到排版不乱，并没有那么容易。目前的话已经有了一些解决方案，虽然能勉强解决问题，但是开发效率太低，不是需要写脚本，就是要写复杂的样式控制，下面来介绍下我在开发中使用到的方法。
杀手锏就vw(view-width),vh(view-height)这个单位，通俗的说这是一个相对浏览器可视区域的参考单位，如果屏幕宽为1000px,那么1px=0.1vw，现在来说说这个单位为什么可行。不管是什么单位，vw也好，%,rem也好，他们最终呈现在屏幕上的都是经过换算后的绝对单位px，只是它们的参考对象不一样而已，所以我们就可以认为页面上的所有元素的参考对象都是屏幕可视区域的宽或者高，那么问题就简化了，我们的参考对象可以统一为可视宽度，意思就是说不管是宽度还是高度或者字体大小我们都统一参考对象为可视宽度。举个例子：设计稿宽度为360px,元素有属性{width:100px,height:150px}={width:27.78vw,height:41.67vw}，为什么不高度用vh，宽度用vw，原因很简单，因为设计稿的宽高比并不实用于所有设备。那么来看一下该单位的支持情况 ：
支持率达到了85%以上，可以大胆的使用了。
一般UI设计师的设计稿都是以iphone6的屏幕大小作为设计标准，那么前端开发人员就需要根据设计图写相应的样式，那么问题来了，我们往往会要写很多width，height，难道我们还要一个一个的去换算一次，这样开发效率就低了，而且前面我们已经统一了参考对象为可视宽度或者高度，那么就可以用工具来统一处理，可帮助我们快速的换算单位。我写了一个工具，工具下载地址，传送门：https://github.com/XYZ-bear 找到conver-unit/pxTOsw/Release/pxTOsw.exe 如果遇到无法编译的情况请自行编译源码（windows平台）。使用方法如下：
1：将可执行文件放入样式文件的父文件夹，如果你用的是sass样式可直使用，否则请自行修改源码。
2：运行pxTOsw.exe文件，输入如图，其中放大倍数由你的新单位特性决定。完成后单击Enter就Ok了。
下面来看下不同设备下的效果图：
总之，布局没有任何问题。有问题请指教，等待我完善最新的开发工具吧，你也可以加入我。
