移动端适配那些事

前言

移动端适配目前网上有好多好多的文章，自己也算是零零散散的接触吧，最早接触还是大学实习找的第一份工作，搞的一个银行app开发用的webapp包的H5的壳，那时的HBuilder编辑器还只有红色的，为啥提着个兄弟，当时手机线连上HBuilder调试开发不要太爽，一键运行。而现在HBuilderX有了，vue vue3 以及npm的开发环境都给你立集成进去了，uniapp 更是成为多平台小程序开发跨端一套成熟方法。起初自己使用是公司的架构师搞的一套完整的组件库还需要手动拷贝js和css文件搭配require.js 来使用,不像如今有赞的vant,饿了么的Mint,滴滴的cube 等等那么方便，像一些1px的边框线的小bug，这些成熟的库多数都已经给你解决了。现在开发方便多了，只需要选择一套相应的成熟方案跟着搞就可以了。自己当时接触的时候处于百分比% 和 rem 的时代vw还没接触 当然 postcss-pxtorem 插件px直接转rem 也没有啦。最近科普了一下不知道是不是很系统，在此分享一下。

视口viewport

提起移动端适配不得不提这货视口 下面我们看看淘宝网两个尺寸下的body大小

可已发现是body的尺寸和模拟器的事一致的 如果我们自己写一个页面呢

怎么回事为啥我自己的页面body尺寸和人家网站上的效果不一样呢 于是乎一顿百度，需要加上viewport(其实我们使用emmt html5生成页面的时候就会自动加上viewport的设置) 在meta标签上我们加上viewport的设置后再看一下

竟然和人家的网站的效果一样了，说明应该搞对了。为啥不加这个设置的时候body的尺寸会是980px呢？2010年左右呢网站似乎还没想着做专门的移动端网站，那时pc端网站一般默认960或者980。 那么meta标签有那个属性设置呢

像素比

除了视口还有这货也不得不提像素比 浏览器直接打印window.devicePixelRatio

我们看到不同为啥会这样呢？ 物理像素设备本身的像素 我们来看iphone5的屏幕分辨率 我们模拟器的尺寸 如果按照真实640尺寸去显示，在320的情况下显示有些文字就会特别小，为了便于人们浏览聪明的厂商就想到用像素比来解决这一问题。 像素比:1像素的内容放大到n个像素去显示 这时候1像素的边框就会出现问题，变成2像素 这个时候就需要我们去处理像素比了，淘宝当时比较成熟的flexible库 目前这个库已经是 ** lib-flexible**了

布局适配方案

百分比宽度可以很好的设置高度设置就比较难过太复杂。em根据自身大小来缩放 两个元素的大小不一样每个元素的的文字大小计算标准也会不一样 后来rem就开始登场了，当时自己用的也是rem的方案使用淘宝的flexible库。rem就是根据根节点的字体大小来进行计算了。

简单看看rem怎么玩的，一个1080p的设计稿

放下刚刚好 想要把这个放到各种设备的尺寸px明显不行 切换了设备明显出问题了

现在需要把px换算成rem了 rem呢会将屏幕分为10份，每份为1rem 1080/10 = 108 那么我们根元素的font-size 为 108px 324/108 = 3rem 那么我们的px转成rem则是3rem

每种设备尺寸我们都需要变换根元素的font-size 下面的事情就交给lib-flexible

我们看到已经显示的差不多了那么lib-fixible是怎么搞的呢？

之后就有了vw了 vw呢会将屏幕分成100份，需要清楚每个元素占多少份就好了 那么怎么如何计算呢，324 / 1080 * 100 = 30vw 为了方便计算，大神们早就搞了这个 postcss-px-to-viewport 此处我只简单设置了更多详细设置请参阅上文postcss-px-to-viewport

当然h5媒体查询也不能落下，用的还比较多，常用的设备尺寸下各自写一个样式来控制，尽管工具越来越好用实际开发中还是会有需要特殊处理的地方。