vue如何使用媒體查詢實現響應式
更新時間：2022年09月19日 09:01:30 投稿：jingxian
這篇文章主要介紹了vue如何使用媒體查詢實現響應式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用媒體查詢實現響應式的兩種方式
前提
依賴：
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 ），這個特性非常的實用，尤其是需要根據設備的類型或者根據特定的特征和設備參數，來修改網站中的CSS樣式。
語法
@media mediatype and|not|only (media feature) {
? ? CSS-Code;
}組成：
一個可選的媒體類型，告訴瀏覽器這段代碼是用在什么類型的媒體上的，具體的媒體類型如下：
all：適用于所有設備（如果不寫默認為all）。print：適用于在打印預覽模式下在屏幕上查看的分頁材料和文檔。screen：主要用于屏幕。speech：主要用于語音合成器。.
一個或者多個媒體特性表達式，是一個被包含的CSS生效所需的規(guī)則或者測試，媒體特性數量眾多，主要的有如下這么幾個：
aspect-ratio：用于檢測視口的寬高比width：用于檢測視口的寬度，可以使用前綴min-width和max-width分別查詢最小值和最大值height：用于檢測視口的高度，可以使用前綴min-height和max-height分別查詢最小值和最大值orientation：用于檢測視口的屏幕方向hover：根據用戶當前的環(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套頁面，在使用這些頁面的組件中進行一次媒體查詢
但是需要引入
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue watch普通監(jiān)聽和深度監(jiān)聽實例詳解(數組和對象)
這篇文章主要介紹了vue watch普通監(jiān)聽和深度監(jiān)聽(數組和對象)，文中單獨通過代碼給大家介紹了vue watch 深度監(jiān)聽的方法，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細介紹了為大家詳細幾種長按事件的需求，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關于如何使用vue3簡單實現WebSocket通信的相關資料,WebSocket是全雙工網絡通信通信協(xié)議,實現了客戶端和服務器的平等對話,任何一方都可以主動發(fā)送數據,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Vue 過濾器filters的實例代碼以及vue過濾器的基本用法,需要的朋友可以參考下2017-12-12
最近在做項目的時候遇到個需求,需要修改el-table背景色,這里給大家總結下,這篇文章主要給大家介紹了關于elementui?el-table底層背景色修改的相關資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue+freemarker中遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue監(jiān)聽某個元素以外的區(qū)域被點擊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了Vue2中多種常用全局自定義指令的封裝,包括一鍵復制,一鍵長按,圖片懶加載等功能,感興趣的小伙伴可以了解下2025-02-02
這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結合實例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-09-09
Vue.js 是一個漸進式的JavaScript框架,廣泛用于構建交互式用戶界面,在 Vue 中,雙向綁定是一項非常核心的概念,尤其是在處理表單輸入時,它使得數據和用戶界面之間的互動變得簡單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實現表單輸入的雙向綁定2025-01-01