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

Vue

最佳

组件

实现

34 replies • 2021-01-01 20:00:03 +08:00

zqguo

Dec 31, 2020

1

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

gdrk

Dec 31, 2020

2

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

maocat

Dec 31, 2020

3

element ui

xieqiang9408

Dec 31, 2020

1

4

tailwind css 了解一下

manami

Dec 31, 2020

2

5

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

zhennann

Dec 31, 2020

6

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

murmur

Dec 31, 2020

7

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

Hanser002

Dec 31, 2020

8

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

SxqSachin

Dec 31, 2020

9

tailwindcss

GG668v26Fd55CP5W

Dec 31, 2020 via iPhone

10

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

cwz346852114

Dec 31, 2020

11

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

meldonization

Dec 31, 2020

12

插眼等高人

gzf6

Dec 31, 2020 via Android

13

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

manami

Dec 31, 2020

14

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

shakaraka

Dec 31, 2020

15

@media 了解下

dartabe

Dec 31, 2020

16

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

zqx

Dec 31, 2020 via Android

1

17

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

wgbx

Dec 31, 2020

18

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

meteor957

Dec 31, 2020

19

@wgbx 应该是媒询+rem

yaphets666

Dec 31, 2020

20

最近做了一个 calc 配合 vw 的

yaphets666

Dec 31, 2020

21

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

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