响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 p…

前言 最近工作中在维护一个VUE项目，突然有一天老板和我说这个应用可能会被再用到iPad、手机等移动端，要求能在这些设备终端上流畅运行，布局样式不变。查看项目整体设计，之前就只是依据1920*1080

我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。 下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC …

主要思路 通过响应式设计稿尺寸不一的情况下，通过 resize事件 时判断窗口选用对应客户端的 设计稿宽度 运算，辅以 @media响应式 即可完美复现响应式的设计啦。 方案 将js代码放在 <hea