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

Vue

最佳

组件

实现

34 条回复 • 2021-01-01 20:00:03 +08:00

1

zqguo

2020-12-31 10:09:21 +08:00

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

2

gdrk

2020-12-31 10:09:36 +08:00

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

3

maocat

2020-12-31 10:10:24 +08:00

element ui

4

xieqiang9408

2020-12-31 10:31:18 +08:00

1

tailwind css 了解一下

5

manami

2020-12-31 10:34:22 +08:00

2

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

6

zhennann

2020-12-31 10:46:23 +08:00

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

7

murmur

2020-12-31 10:49:58 +08:00

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

8

Hanser002

2020-12-31 11:03:26 +08:00

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

9

SxqSachin

2020-12-31 11:06:36 +08:00

tailwindcss

10

falcon05

2020-12-31 11:16:06 +08:00 via iPhone

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

11

cwz346852114

2020-12-31 11:38:25 +08:00

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

12

meldonization

2020-12-31 11:39:08 +08:00

插眼等高人

13

gzf6

2020-12-31 11:39:53 +08:00 via Android

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

14

manami

2020-12-31 11:40:17 +08:00

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

15

wunonglin

2020-12-31 12:17:24 +08:00

@media 了解下

16

dartabe

2020-12-31 12:21:53 +08:00

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

17

zqx

2020-12-31 12:28:45 +08:00 via Android

1

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

18

wgbx

2020-12-31 12:39:59 +08:00

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

19

meteor957

2020-12-31 12:45:48 +08:00

@wgbx 应该是媒询+rem

20

yaphets666

2020-12-31 13:19:00 +08:00

最近做了一个 calc 配合 vw 的

21

yaphets666

2020-12-31 13:23:45 +08:00

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

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