vue中關於@media媒體查詢的使用

Posted on by

關於@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 是指縮放比例

具體內容請自行百度

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：