vue中關于@media媒體查詢的使用
更新時間：2022年08月01日 11:24:42 作者：左手牽??右手
這篇文章主要介紹了vue中關于@media媒體查詢的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
關于@media媒體查詢使用
1.vue需要安裝sass-loader和node-sass2個插件來使用
①安裝sass：
npm install sass-loader --save-dev
②安裝node：
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.直接在每個頁面中使用
我這里是：樣式寫的適配小于750px和大于750px是什么樣的
pc是大于750px的，大家可以根據需要去使用
使用@media媒體查詢失效問題
vue媒體查詢失效原因
網上總結的比較多，因為這是接手的項目，還不夠熟悉代碼，一一排查得到了一下結果：
// 出錯位置 <meta name="viewport" content="user-scalable=0">
這個meta在html頁面當中，vue只有一個這一個頁面，會把所有模板放里面，我的這個html結構文件是index.html
以下是修改方式：
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
width=device-width, initial-scale=1.0 這兩個比較重要
width=device-width是指可視化寬度initial-scale=1.0是指縮放比例
具體內容請自行百度
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
項目中需要制作一個雙擊編輯單擊選中可刪除Tag標簽,本文就來介紹一下如何實現,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要給大家介紹了關于Vue項目打包為exe可安裝程序操作步驟的相關資料,Vue是一種流行的JavaScript框架,用于構建單頁面應用程序(SPA),需要的朋友可以參考下2023-12-12
大家在做前端項目的時候,大部分頁面, 游客都可以直接訪問 , 如遇到 需要登錄才能進行的操作,頁面將提示并跳轉到登錄界面,那么如何才能實現頁面攔截并跳轉到對應的登錄界面呢,本文小編就來給大家介紹一下Vue實現頁面訪問攔截的方法,需要的朋友可以參考下2023-08-08
Vuejs 實現簡易 todoList 功能 與 組件實例代碼
本文通過實例代碼給大家介紹了Vuejs 實現簡易 todoList 功能 與 組件，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
下面小編就為大家分享一篇vue中實現methods一個方法調用另外一個方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于vuex模塊獲取數據及方法的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue組件全局注冊實現警告框的實例,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了使用vue cli4.x搭建vue項目的過程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
第一次用Vue+MySQL實現注冊登錄功能,就已經踩了很多坑,下面這篇文章主要給大家介紹了關于使用Vue+MySQL實現登錄注冊案例的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了vue遞歸組件實現樹形結構，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09