vue中關(guān)于@media媒體查詢的使用
更新時間：2022年08月01日 11:24:42 作者：左手牽??右手
這篇文章主要介紹了vue中關(guān)于@media媒體查詢的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
關(guān)于@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的，大家可以根據(jù)需要去使用
使用@media媒體查詢失效問題
vue媒體查詢失效原因
網(wǎng)上總結(jié)的比較多，因為這是接手的項目，還不夠熟悉代碼，一一排查得到了一下結(jié)果：
// 出錯位置 <meta name="viewport" content="user-scalable=0">
這個meta在html頁面當(dāng)中，vue只有一個這一個頁面，會把所有模板放里面，我的這個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 這兩個比較重要
width=device-width是指可視化寬度initial-scale=1.0是指縮放比例
具體內(nèi)容請自行百度
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了spring-cloud-stream的手動消息確認問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
el-form-item表單label添加提示圖標(biāo)的實現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11
本文主要介紹了element中form組件prop嵌套屬性的問題解決，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)2022-08-08
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue項目如何部署到SpringBoot工程下問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue實現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Element-ui?Layout布局(Row和Col組件)的實現(xiàn)
我們在實際開發(fā)中遇到一些布局的時候會用到Layout布局，本文就詳細的介紹了Element-ui?Layout布局(Row和Col組件)的實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2021-12-12
下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03