vue如何使用媒體查詢實現(xiàn)響應式
更新時間：2022年09月19日 09:01:30 投稿：jingxian
這篇文章主要介紹了vue如何使用媒體查詢實現(xiàn)響應式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用媒體查詢實現(xiàn)響應式的兩種方式
前提
依賴：
sass,sass-loader
1.在每個組件中為其使用媒體查詢
這種方法的有點是減少了重寫不同終端同一組件的工作量,缺點是每個組件都要使用媒體查詢,當一套頁面組件不同時,需要進行組件的顯示與隱藏(display:none!important),在不同終端區(qū)別不大的情況下建議使用這種方法.
例如:
.styleClassName{
width:200px;
@media only screen and (min-width: 1200px) {
width:100px
}
}2.寫n套頁面,在使用這些頁面的組件中進行一次媒體查詢
這種方法的優(yōu)點是媒體查詢比較方便,缺點是在多終端相似度較高的情況下,要寫幾套重復頁面.
因此,此方式適宜在多終端之間差異較大的情況下使用.
示例：
<template> ?? ?<div> ?? ??? ?<div class="pc"> ?? ??? ??? ?<!-- pc端頁面--> ?? ??? ?</div> ?? ??? ?<div class="pad"> ?? ??? ??? ?<!-- pad端頁面--> ?? ??? ?</div> ?? ??? ?<div class="mobile"> ?? ??? ??? ?<!-- 移動端頁面--> ?? ??? ?</div> ?? ?</div> </template>
<style lang="scss" scoped>
//pc端
@media only screen and (min-width: 1200px) {
? .pc {
? ? display: block !important;
? }
? .pad {
? ? display: none !important;
? ? touch-action: auto !important;
? }
? .mobile {
? ? display: none !important;
? ? touch-action: auto !important;
? }
}
//pad端
@media only screen and (min-width: 768px) and(max-width: 1199px) {
? .pc {
? ? display: none !important;
? }
? .mobile {
? ? display: none !important;
? ? touch-action: auto !important;
? }
? .pad {
? ? display: block !important;
? ? touch-action: auto !important;
? }
}
// 手機端
@media only screen and (max-width: 767px) {
? .pc {
? ? display: none !important;
? }
? .mobile {
? ? display: block !important;
? ? touch-action: auto !important;
? }
? .pad {
? ? display: none !important;
? ? touch-action: auto !important;
? }
}
</style>vue中的媒體查詢
先說一下 css3 中的媒體查詢
媒體查詢 （英文：Media queries ），這個特性非常的實用，尤其是需要根據(jù)設備的類型或者根據(jù)特定的特征和設備參數(shù)，來修改網(wǎng)站中的CSS樣式。
語法
@media mediatype and|not|only (media feature) {
? ? CSS-Code;
}組成：
一個可選的媒體類型，告訴瀏覽器這段代碼是用在什么類型的媒體上的，具體的媒體類型如下：
all：適用于所有設備（如果不寫默認為all）。print：適用于在打印預覽模式下在屏幕上查看的分頁材料和文檔。screen：主要用于屏幕。speech：主要用于語音合成器。.
一個或者多個媒體特性表達式，是一個被包含的CSS生效所需的規(guī)則或者測試，媒體特性數(shù)量眾多，主要的有如下這么幾個：
aspect-ratio：用于檢測視口的寬高比width：用于檢測視口的寬度，可以使用前綴min-width和max-width分別查詢最小值和最大值height：用于檢測視口的高度，可以使用前綴min-height和max-height分別查詢最小值和最大值orientation：用于檢測視口的屏幕方向hover：根據(jù)用戶當前的環(huán)境是否允許懸停在元素之上來應用不同的樣式（例如電腦就可以進行懸懸停，觸摸屏用戶就無法進行懸停）
一組CSS規(guī)則，會在測試通過且媒體類型正確的時候應用。
下面是一般情況下通過寬度區(qū)分媒體途徑的方法
//當屏幕最小寬度為992px?
@media screen and (min-width : 992px) {
? ? body {
? ? ? ? 屬性: 值
? ? }
}
//當屏幕寬度 最小為768px 最大為991px時?
@media screen and (min-width:768px) and (max-width:991px) {
? ? body {
? ? ? ?屬性: 值
? ? }
}
//當屏幕最大寬度為767px?
@media screen and (max-width:767px) {
? ? body {
? ? ? ?屬性: 值?
? ? }
}vue 與 css3 中的 媒體查詢有點不同
在vue中是不能直接使用@media的，我們必須結合less或者sass來使用它
安裝命令
npm install sass-loader node-sass --save-dev
npm install less less-loader --save-dev
可能遇到的問題
lass 或者 sass 版本過高,可以適當降低版本,對應 vue 與 腳手架的版本
使用
方法一:
body{
?? ?background-color:red;
?? ?@media only screen and (max-width: 800px) {
? ? background-color:green;
? }
}方法二
寫n套頁面，在使用這些頁面的組件中進行一次媒體查詢
但是需要引入
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue-cli的index.html中使用環(huán)境變量方式
這篇文章主要介紹了vue-cli的index.html中使用環(huán)境變量方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了Vue多種方法實現(xiàn)表頭和首列固定的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
VUE微信H5生成二維碼海報保存在本地相冊的實現(xiàn)
本文主要介紹了VUE微信H5生成二維碼海報保存在本地相冊的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式來實現(xiàn)的.本文重點給大家介紹Vue數(shù)據(jù)雙向綁定原理及簡單實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了vue如何清除地址欄參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue全局掛載實現(xiàn)APP全局彈窗的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
VUEJS 2.0 子組件訪問/調(diào)用父組件的實例
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調(diào)用父組件的實例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了vue項目中用cdn優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了關于vue使用keep-alive后清除緩存的相關資料,這個問題在我們?nèi)粘９ぷ髦薪?jīng)常會用到,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
Mint UI 是 由餓了么前端團隊推出的 一個基于 Vue.js 的移動端組件庫，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細的代碼,有需要的小伙伴可以參考下2018-04-04