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