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
参考:https://www.jianshu.com/p/d61705d68516
移动端和pc端的布局适配,采用响应式布局,原理其实比较简单使用resize,或@media css3的媒体查询,可以参考El-admin,
最终实现pc头部导航菜单,移动端左侧抽屉式导航栏菜单,还有底部footer固定,并且随着宽度自适应切换,这种布局也是当前比较流行的一种布局方式
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值