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

[miniyao]

媒体查询的话，每个页面都要写，组件化后怎么实现最佳？

[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

[GG668v26Fd55CP5W]

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

[cwz346852114]

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

[meldonization]

插眼等高人

[gzf6]

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

[manami]

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

[shakaraka]

@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

[zinco]

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

[8888888888]

移动端就用 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]

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