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