Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法
更新時間：2024年07月19日 09:03:10 作者：蒾酒
這篇文章主要介紹了Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下
問題場景
最近開發(fā)ai相關項目，應用界面在pc端顯示如下：
這是在電腦開發(fā)環(huán)境模擬移動端設備尺寸來進行不同尺寸設備響應式設計?，F(xiàn)在一點問題沒有
當我在手機上通過同一局域網(wǎng)訪問的時候 ，問題就來了。很多樣式亂掉了后來發(fā)現(xiàn)是沒生效。
接著我又切換微信自帶的瀏覽器訪問
好家伙又正常了。
問題原因
我項目中使用了scss來實現(xiàn)CSS嵌套樣式,由于我的瀏覽器內核版本較新，本身就支持嵌套樣式，很多地方我沒有在<style>標簽加lang=scss聲明，但是可以成功解析并運行，導致我是感知不到我忘記加lang=scss的。這樣會導致我電腦訪問上一點問題沒有，手機系統(tǒng)自帶瀏覽器有些內核版本低，解析不了嵌套的樣式，出現(xiàn)部分樣式失效，而微信自帶的瀏覽器由于內核比較新，支持嵌套解析，就顯示正常了。
所以說本質原因就是忘了加lang=scss，使得scss沒有把CSS嵌套樣式預編譯成扁平樣式，內核較老的瀏覽器只認識扁平樣式。
解決方案
添加scss聲明即可。
現(xiàn)在就恢復正常了
到此這篇關于Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法的文章就介紹到這了,更多相關Vue3 pc端正常移動端失效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue模擬數(shù)據(jù),實現(xiàn)路由進入商品詳情頁面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實現(xiàn)路由進入商品詳情頁面的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
element ui的el-input-number修改數(shù)值失效的問題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套）
這篇文章主要介紹了vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易購物車頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
虛擬DOM是一種用JavaScript對象來描述真實DOM的技術,通過diff算法實現(xiàn)高效的DOM更新,提高頁面性能,Vue通過render函數(shù)和VNode實現(xiàn)虛擬DOM,結合diff算法減少DOM操作,提升用戶體驗2024-12-12
本文主要介紹了Vue3中10多種組件通訊方法小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
全局API并不在構造器里,而是先聲明全局變量或者直接在Vue上定義一些新功能,Vue內置了一些全局API,下面這篇文章主要給大家介紹了關于vue2源碼解析之全局API的相關資料,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue如何從接口請求數(shù)據(jù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細介紹了vue調取電腦攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue中element 的上傳功能的實現(xiàn)思路,本文大概通過兩種實現(xiàn)思路，具體內容詳情大家跟隨腳本之家小編一起看看吧2018-07-07