基于VUE的移动端和PC端适配


概述

适配移动和PC端有两种方式:一是一套资源,根据设备类型加载不同的CSS;二是两套资源,通过路由分别加载不同页面。前者适用于两端差别不大,交互简单的项目;后者适用于两端差别大,设计要求高,拓展性要求高的项目。


CSS适配

如下,详见vue-cli-study

// 判断终端类型,以加载不同的CSS样式 ---------------------------
let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
if (isMobile) { 
   require('./assets/css/mobile.css'); // 加载移动端公共CSS
 } else {
   require('./assets/css/pc.css');     // 加载PC端公共CSS
 }
 Vue.prototype.$isMobile = isMobile;


Rem和VW

rem是css中的长度单位,1rem等于根元素html的font-size值;当页面中所有元素都使用rem时,就只需改变根元素font-size,所有元素就会放大或缩小;因此只需写一小段js代码,根据屏幕宽度改变html的font-size值,就可以做到弹性布局,但这种方式的弊端是页面元素和根元素font-size值强耦合,系统字体放大或缩小时,会导致布局错乱,且html文件头部要插入一段js代码,更优的做法应该是使用VW。

viewport是浏览器可视区域大小,1vw等于viewport宽度的1%,1vh等于viewport高度的1%;可以认为100vw就是屏幕宽度;

100vw = window.innerwidth
100vh = window.innerheight

100vw和width:100%的区别:

a>. 百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响;

b>. 100vw包括了页面滚动条宽度,但把body或html设为width:100%时,是不包括页面滚动条的宽度的;



HTML适配

根据设备类型路由到相应页面:vue-cli-study

{
    path: '/htmlAdaptation', // PC和移动端 - HTML页面适配
    name: 'htmlAdaptation',
    component: isMobile?() => import('../views/htmlAdaptation/mobile.vue'):() => import('../views/htmlAdaptation/pc.vue')
},



举报

© 著作权归作者所有


1