我的需求是 pc端所有的頁(yè)面和移動(dòng)端的登錄頁(yè),首頁(yè) 都寫在一個(gè)項(xiàng)目里

這時(shí)候就需要我在登錄的時(shí)候判斷是什么設(shè)備 然后跳到相應(yīng)的頁(yè)面 采用不同的樣式

========================================================

看到后臺(tái)有小伙伴留言說(shuō)不知道具體的寫在那個(gè)文件里 所以決定更新一波,這次寫詳細(xì)點(diǎn),希望可以更好的幫助到大家

下面這個(gè)是我整個(gè)項(xiàng)目的目錄 ,另外稍微介紹下這個(gè)項(xiàng)目

采用vscode 編輯器編碼 vue-cli腳手架搭建

node環(huán)境下載依賴 結(jié)合webpack 采用vux對(duì)數(shù)據(jù)進(jìn)行管理

如果是手機(jī)端的話 我要采用rem布局 設(shè)計(jì)稿是640px的標(biāo)準(zhǔn)

這是移動(dòng)端rem布局 1rem=100px

如果是pc端的話 我需要頁(yè)面自適應(yīng) 設(shè)計(jì)稿是寬1920px的標(biāo)準(zhǔn) 并且當(dāng)電腦屏幕尺寸小于1024px(一般來(lái)講最小的電腦尺寸就是1024px),就不讓頁(yè)面繼續(xù)縮小了 否則樣式錯(cuò)亂,影響用戶體驗(yàn).

把這張圖片的代碼全部粘 貼 作為一個(gè)單獨(dú)的js文件引入 完美自適應(yīng)屏幕大小

這個(gè)是我要對(duì)設(shè)備進(jìn)行判斷

這行代碼是判斷pc登陸還是手機(jī)端登錄

上面是我分開截取給大家說(shuō)明的

完整的代碼 上圖片 我寫在了js/rem.js文件中

這個(gè)上面用到了jQuery? 大家可以npm i jQuery -S下載依賴 也可以根據(jù)上面的代碼 改成原生js

下面放上所有代碼 方便大家使用 希望可以對(duì)大家有幫助!

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

? ? ? ? // alert('手機(jī)端')

? ? ? ? var abc = document.documentElement.clientWidth;

? ? ? ? var bl = abc/640//設(shè)計(jì)稿的寬度

? ? ? ? var fontSize = 100*bl

? ? ? ? document.documentElement.style.fontSize = fontSize + "px"

? ? }else{

? ? ? ? //? alert('PC端')

? ? ? ? var whdef = 100 / 1920; // 表示1920的設(shè)計(jì)圖,使用100PX的默認(rèn)值

? ? ? ? var wH = window.innerHeight; // 當(dāng)前窗口的高度

? ? ? ? var wW = window.innerWidth; // 當(dāng)前窗口的寬度

? ? ? ? var rem

? ? ? ? if(wW <= 1024) {

? ? ? ? ? ? rem = 1024 * whdef;

? ? ? ? } else {

? ? ? ? ? ? rem = wW * whdef; // 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)FONT-SIZE值

? ? ? ? }

? ? ? ? $('html').css('font-size', rem + "px");

? ? ? ? $(window).resize(function() // 綁定到窗口的這個(gè)事件中

? ? ? ? ? ? {

? ? ? ? ? ? ? ? var whdef = 100 / 1920; // 表示1920的設(shè)計(jì)圖,使用100PX的默認(rèn)值

? ? ? ? ? ? ? ? var wH = window.innerHeight; // 當(dāng)前窗口的高度

? ? ? ? ? ? ? ? var wW = window.innerWidth; // 當(dāng)前窗口的寬度

? ? ? ? ? ? ? ? if(wW <= 1024) {

? ? ? ? ? ? ? ? ? ? rem = 1024 * whdef;

? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? rem = wW * whdef; // 以默認(rèn)比例值乘以當(dāng)前窗口寬度,得到該寬度下的相應(yīng)FONT-SIZE值

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? $('html').css('font-size', rem + "px");

? ? ? ? ? ? ? ? // var H = document.documentElement.scrollHeight;

? ? ? ? ? ? ? ? // $('html').height(H);

? ? ? ? ? ? });

? ? }

喜歡的話 點(diǎn)個(gè)小心心哦!