很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…

作为一名前端开发者，你有没有遇到过这种头痛的事情。每次开发pc端的网页时，不管是官网还是管理后台，UI设计师都是按照`1920*1080`（16:9）的比例来给你提供设计稿的，导致你画页面的时候

1.推荐使用px2vw进行适配 2. 使用amfe-flexible + postcss-pxtorem

这篇文章讲的是网页在移动端的适配问题，这里面没有物理像素之类的事，这是两个东西，别混为一谈！有些人为了博眼球，一上来就是什么物理像素，像素比之类的字眼，这俩东西对移动端确实有影响，但是没那么大，基础的同学不需要去深究。 适配是一件特简单的事情，别想太复杂。像什么数学换算之类的，…

rem（font size of the root element）是相对长度单位。 相对于根元素（即 html 元素）font-size 计算值的倍数。 适配原理：将 px 替换成 rem，动态修改 html 的 font-size 适配。 也就是说最低兼容到 375 像素的…

vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。 vmin和vmax是根据Viewport中长度偏大的那个维度值计算出来的，如果w…

虽然上面这种简单的使用百分比可以实现但是，百分比无法实现字体的自适应，百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem （我们一般只适配宽度） 首先rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 html 的 fontSiz…

在互联网上有关于1px边框的解决方案已经有很多种了，自从使用Flexible库之后，再也没有纠结有关于1px相关的问题。由于最近在考虑新的移动端适配方案，也就是放弃Flexible库，我不得不考虑重新处理1px的方案。为此为我自己也重撸了一些1px的解决方案，整理出来，希望对有…

对于750设计稿，相对于iphone6的屏幕宽度是375，即2倍的dpr，当在样式中写入border: 1px solid #ccc时，渲染出来的相当于1*2px的边框，所以看起来就是比设计图粗了。 注意: 当同时使用postcss-px-to-viewport插件进行vw方案…