PC端Vue和移動端Vue的區別很明顯,主要在適配上和UI組件上。下面我們來一一分析。
首先是適配:
/* PC端 */ @media (min-width: 1024px) { .container { width: 1024px; margin: 0 auto; } } /* 移動端 */ @media (max-width: 768px) { .container { width: 100%; margin: 0; } }
從代碼上看,我們使用@media來實現不同設備之間的適配。PC端和移動端不同寬度下展現的效果是不同的。
其次是UI組件:
/* PC端 */ import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' /* 移動端 */ import Vant from 'vant' import 'vant/lib/index.css'
從代碼上看,我們看到了不同的UI組件庫。在PC端,我們可以使用ElementUI來快速搭配適合PC端的UI;在移動端,我們可以使用Vant來快速搭配適合移動端的UI。
綜上所述,雖然Vue在PC端和移動端有著共同的基礎,但是在適配和UI組件上是需要考慮到設備的差異,使用不同的代碼和組件來滿足不同終端上的需求。
上一篇jQuery key