Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于移动端布局 #12

Open
cangyu1993 opened this issue Jun 14, 2019 · 9 comments
Open

关于移动端布局 #12

cangyu1993 opened this issue Jun 14, 2019 · 9 comments

Comments

@cangyu1993
Copy link

我在view里没找到你移动布局的方案,能告知一下吗?之前都是用网易的移动端布局

@klren0312
Copy link

@cangyu1993
Copy link
Author

vue3的配置,嗯。。。。。目前还是使用的2.0,这样配置了之后css里面写px的时候会自动转vw吗??

@klren0312
Copy link

这并不是vuecli3配置, 只是配置postcss, 用它的的postcss-px-to-viewport插件. 你的2.0里面也内置了有postcss

@cangyu1993
Copy link
Author

嗯,看了你的写法也查了一下资料,感觉可以一试,但是我还有一个疑问,就是这样配置之后使用ui框架会不会改变ui框架的单位,我上次使用阿里的px自动转rem插件lib-flexble之后,ui框架的单位被影响了,就是整体变得很小很小,小哥使用这个插件有没有这样的情况?

@cangyu1993
Copy link
Author

我是这样想的一般ui框架都有一个相同的类名,能不能忽略掉ui框架的类名

@wwenj
Copy link
Owner

wwenj commented Jun 17, 2019

嗯,看了你的写法也查了一下资料,感觉可以一试,但是我还有一个疑问,就是这样配置之后使用ui框架会不会改变ui框架的单位,我上次使用阿里的px自动转rem插件lib-flexble之后,ui框架的单位被影响了,就是整体变得很小很小,小哥使用这个插件有没有这样的情况?

手淘的lib-flexble之前一直用很方便,现在用的这个就是最新的基于vue工程的移动端适配,具体文章你可以看下https://www.w3cplus.com/mobile/vw-layout-in-vue.html
使用UI组件的话里面单位肯定会有影响,变得很大或者很小,其实影响并不大,本身UI组件中用的单位就很少,使用时手动调整大小就好了,用它组件提供的接口或者直接找到class名直接修改就好了

@wwenj
Copy link
Owner

wwenj commented Jun 17, 2019

我是这样想的一般ui框架都有一个相同的类名,能不能忽略掉ui框架的类名

一般UI组件的样式修改的很少,通常就改变个最外层的宽高,如果真的UI组件内的样式有问题要修改的话,直接在开发者工具-审查元素中找到这个DOM节点,复制这个节点的class类名,拿到组件中直接修改就好,但是修改样式要写在全局样式下不能写在scoped组件样式下

@cangyu1993
Copy link
Author

`// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {utf8: false},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750,
viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines'],
minPixelValue: 1,
mediaQuery: false,
exclude: /(/|\)(node_modules)(/|\)/
},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
`
忽略就好了,完美解决

@thewar196
Copy link

什么时候服务器能上线 数据出来后 练习就方便了
好的项目

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants