1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue移动端和pc适配 搭建网站布局

vue移动端和pc适配 搭建网站布局

时间:2021-11-03 19:02:22

相关推荐

vue移动端和pc适配 搭建网站布局

最近自己写一个类似于blog小网站,主要目的是完善一下技术栈,本人是后端出身,一碰到前端的问题就头大,一开始打算在网上找了好些模板,但是发现几乎都是适用于管理端比如El-admin,这种模板网站封装的十分完美,当然这的需要对vue和vuex,ElementUI,sass等前端知识比较丰厚的人来讲,用起来比较方便,而像uni-app这种适合新手去踩坑,主打多平台的打包部署,但是遇到问题比较懵逼,而且它对pc端的支持比较不良好。

前端开发适配于pc和移动端浏览器

类似这种框架有postcss-px2rem,我目前用的就是这种

npm install postcss-px2rem

在vue.config.js加入

const px2rem = require('postcss-px2rem')const postcss = px2rem({remUnit: 32 // 基准大小 baseSize,需要和rem.js中相同})module.exports = {css: {loaderOptions: {postcss: {plugins: [postcss]}}}}

也可以自己写脚本将px转rem

参考:/p/d61705d68516

移动端和pc端的布局适配,采用响应式布局,原理其实比较简单使用resize,或@media css3的媒体查询,可以参考El-admin,

最终实现pc头部导航菜单,移动端左侧抽屉式导航栏菜单,还有底部footer固定,并且随着宽度自适应切换,这种布局也是当前比较流行的一种布局方式

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。