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固定，并且随着宽度自适应切换，这种布局也是当前比较流行的一种布局方式

vue移动端和pc适配，搭建网站布局相关推荐

Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...
vue移动端和pc端切换显示两套不同的代码
首先在App.vue中 <template ><div id="app" ><r ...
vue移动端、PC自适应（配置postcss-px2rem）
现在配置postcss-px2rem移动端适配的方法大致有几种: 不管用那种方法配置,首先拉取依赖lib-flexible 和 postcss-px2rem 一对,或者lib-flexible 和 p ...
vue 移动端与PC端的响应式布局整理
响应式布局大概就是三种方法: 首先必须在页面头部必须有mate声明的viewport, **1,**百分比布局.就是margin,padding啥的都是百分比. **2,**媒体查询(@media), ...
vue 移动端项目字体适配
shop vw适配 .browserslistrc文件删除"not dead" 安装依赖 cnpm i postcss-import postcss-url postcss-asp ...
Vue 服务端渲染原理拆分成三步个步骤简单的实现一个案例
前言可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用服务端渲染搭建项目比较少,本文是记录我在学习服务端渲染过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...
【Vue】pc和移动端网页样式适配
在下面环节会讲解怎么做pc和移动端网页样式适配. 在当下有两种实现样式适配的:JS 适配方案和CSS 媒体查询适配.下面会具体讲解一下代码该怎么写.
Vue.js(十) element-ui PC端组件库
一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...

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

vue移动端和pc适配，搭建网站布局相关推荐

最新文章

热门文章