同一站点实现多端项目自适应

背景

因PC端和移动端布局样式完全不一样,甚至功能也有差别,但却要在同一个域名站点下展示

项目背景:vue + router

思考

在入口文件main.js中根据平台不同引用不同的页面路由。如:配置两个路由文件,一个是PC端使用,一个是移动端使用,路由path一样,但指向的component不同。此时在开发时可分为两个项目独立开发,也可按照功能分类进行多端同时开发,通用方法和restful接口都能够两端使用

布局问题

h5需要自适应布局,PC也需要自适应布局,使用了px2rem插件进行打包,同时只能够实现其中一端的自适应,而另一端的自适应无法顾及,且有可能会被其他端的自适应影响,导致一些布局问题

解决

px2rem是通过设置全局的fontSize来转换px2rem,此时可以考虑根据不同的平台设置不同的全局的fontSize。

移动端可通过配置font-size自适应大小达到展示的自适应布局,PC端可根据需要,可配置根据font-size进行不同分辨率下的自适应,也可固定font-size通过百分比控制展示的自适应布局。PC端自适应布局的方法有很多,若不使用通过全局font-size自适应来实现,仍有许多方法能够实现布局的自适应,比如:Web前端自适应布局你需要知道的所有事儿

你可能感兴趣的:(同一站点实现多端项目自适应)