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

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽…

从古老的的百分比布局+px+媒体查询到rem布局，一直没找到心仪的移动端适配方案。网上搜索的教程质量也是参差不齐(要么配置过于繁琐，要么一篇文章到处抄袭)，反正我看完了总有一种无从下手的无奈。所幸，经同事推荐找到一款完美的插件。欣喜之余，以作记录。同时希望能给需要的朋友提供帮助…

普通css中使用@media 去处理响应式网站开发估计大部分人都遇到过，但是在css预处理如此流行的今天，我们应该学会更敏捷的开发模式，更好的让他们发挥最大的效率。响应式开发大同小异但是具体处理方案还是很多的，这里我分享一个比较规范，用起来也比较舒服的scss处理的媒体查询方案…

媒体查询学习媒体查询的核心是什么?实现页面在不同设备下正常预览[判断当前设备]媒体类型将不同的设备划分为不同的类型媒体特性width网页显示区域完全等于设置的宽度height网页显示区域完全等于设置的

这个问题很多人问起过我，实际上，当我对使用 Flexbox 还不太熟悉的时候，我谷歌过这个问题很多次。查看下我的谷歌搜索历史，上一年我曾四次搜索类似“flex-basis vs width vs min-width”的问题。废话少说！今天让我来回答这个问题，希望大家以后不用再搜…

我们经常在某些业务场景中，需要实现子元素均等占用父元素空间的效果。到目前为止，我使用最多的就是用 flex: 1 来实现。直到有一天我突然想使用 flex-grow: 1 来达到相同的效果，但是浏览器却给了我不一样的表现，我才发现我忽略了剩余空间（free space）这个关键…