Vue 适配响应式布局，最佳实现应该怎么处理？

• 資深大佬 : zqguo

  这跟 vue 没关系，rem 了解下 ？

• 資深大佬 : gdrk

  插眼等一个，我目前都是写在一个全局 css 文件里…

• 資深大佬 : maocat

  element ui

• 資深大佬 : xieqiang9408

  tailwind css 了解一下

• 資深大佬 : manami

  vue 搭配 bulma 香惨，更多请查看 https://bulma.io

• 資深大佬 : zhennann

  pc=mobile+pad，一套页面组件同时适配 pc 端和 mobile 端。效果演示： https://cabloy.com/zh-cn/articles/adaptive-layout.html

• 資深大佬 : murmur

  每次说 rem 、响应式的我都要把小米手机的横屏移动版拿来做例子，叫你们响应，叫你们 rem

• 資深大佬 : Hanser002

  单独写一个容器组件容器组件包含这些媒体查询 每个页面都套上这个组件
  再简单点每个页面单独加一个媒体查询的类名

• 資深大佬 : SxqSachin

  tailwindcss

• 資深大佬 : falcon05

  @manami 额这不就是另一个 bootstrap 吗？

• 資深大佬 : cwz346852114

  flex 布局 如果是 pc 端 建议 el 的栅格

• 資深大佬 : meldonization

  插眼等高人

• 資深大佬 : gzf6

  百分比和 flex, grid 可以解决大部分问题，布局好解决，但是文字的可读性是个问题，有些大得破坏布局，有些小得影响阅读，得不同设备调试，这方面媒体查询用的多点

• 資深大佬 : manami

  @falcon05 bulma 只需要写 css 就行了，不需要依赖 jq，bootstrap 需要等到版本 5 才去除 jq

• 資深大佬 : wunonglin

  @media 了解下

• 資深大佬 : dartabe

  扒 Walmart 和 Amazon 发现都用的 grid 布局

• 資深大佬 : zqx

  现在都倾向于不区分设备，一套代码，让浏览器去处理适配问题。
  怎么让浏览器处理呢？
  用 Flex 或 Grid 布局，浏览器厂商费了那么大力气研发这些新特性，就是为了让开发者少写兼容代码。
  现在几乎用不到媒体查询，和性能优化的精灵图一样，已经是过时的技术了。
  REM 更不是什么好方案，根据屏幕尺寸用脚本动态计算 font-size，哪个天才想出来的。浏览器为什么既支持 em 也支持 px，就是为了不同场景的用法，em 的官方用法就不是用来适配屏幕尺寸的

• 資深大佬 : wgbx

  flex Grid 媒体查询，rem 能做屁的响应式？

• 資深大佬 : meteor957

  @wgbx 应该是 媒询+rem

• 資深大佬 : yaphets666

  最近做了一个 calc 配合 vw 的

• 資深大佬 : yaphets666

  @function autoPx($args) {
  @return calc(#{$args} / 设计图宽度 * 100vw);
  }

  args 就是传入设计图上某个长宽高,总之是你需要的尺寸
  比如设计图上有个 div 宽度 10 像素
  后面直接用 width:autoPx(10)
  再搭配 flex 布局和百分比

• 資深大佬 : syozzz

  mobi.css

• 資深大佬 : loading

  @manami 同 bluma

• 資深大佬 : 734694671

  我们现在的项目是脚手架用 px2rem 插件直接把 px 转为固定比例的 rem，然后布局用 flex 百分比写的，目前使用着 PC，Pad 都还可以，再加上移动端就得媒体查询多写点适配了

• 資深大佬 : timedivision

  移动端就用 flex + vw
  pc 端一般管理后台就那些个框架
  做官网的话一般都有版心宽度，其次也可以用 flex，再加上点媒体查询就够了

• 資深大佬 : waiaan

  自适应和响应式是两码事吧？

• 資深大佬 : justsosososo

  手机适配 rem pc 直接媒体查询 栅格 flex

• 資深大佬 : lichdkimba

  element ui 大部分组件移动端都不行啊。。。。
  @maocat

• 資深大佬 : akakidz

  @zqx 赞同，目前刚做完一个项目，rem 真的挺痛苦的

• 資深大佬 : missGo

  用 postcss-px-to-viewport 搭配 scss 封装的媒体查询也是一种路径

• 資深大佬 : KuroNekoFan

  rem 方案准确的说只是同一个 layout 等比例放大缩小，使用 mediaquery 针对不同屏幕尺寸 /长宽比应用不同的 layout 才叫响应式……

• 資深大佬 : aircjm

  quasar 应该是比较好的方案吧

• 資深大佬 : viiii

  直接 vueitfy 一把梭

• 資深大佬 : JerryY

  不用框架的话，全局+一些定制化的适配（媒体查询）