1、媒體查詢@media
CSS3媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式，當(dāng)重置瀏覽器窗口大小的過程中集晚，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面臊恋。
選擇300px纳胧、600px、900px、1200px作為分割點。根據(jù)瀏覽器寬度抡秆，設(shè)置不同的樣式。
效果圖:
響應(yīng)式布局-媒體查詢.gif
代碼:
<template>
<div class="media-box">
媒體查詢響應(yīng)式布局
</div>
</template>
<script>
export default {
}
</script>
<style>
.media-box{
color: #fff;
/* 原有樣式會被媒體查詢樣式覆蓋掉 */
background: #f90;
}
/* 瀏覽器寬度范圍不同吟策，顯示不同的樣式 */
@media (min-width: 0px) and (max-width: 300px) {
.media-box{
background: #0f0;
}
}
@media (min-width: 300px) and (max-width: 600px) {
.media-box{
background: #0ff;
}
}
@media (min-width: 600px) and (max-width: 900px) {
.media-box{
background: #ff0;
}
}
@media (min-width: 900px) and (max-width: 1200px) {
.media-box{
background: #0ea8f0;
}
}
/* 最小寬度1200px的樣式 */
@media (min-width: 1200px) {
.media-box{
background: #7204b3;
}
}
</style>
2儒士、百分比布局%
通過百分比單位，可以使得瀏覽器中組件的寬和高隨著瀏覽器的高度的變化而變化檩坚，從而實現(xiàn)響應(yīng)式的效果着撩。
效果圖:
響應(yīng)式布局-百分比.gif
代碼:
<template>
<div class="main-box">
百分比布局
<div class="percentage">
百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局百分比布局
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.percentage{
width: 100%;
height: 100%;
background: #09f;
}
</style>
3、視圖窗口布局vw/vh
CSS3中引入了一個新的單位vw/vh匾委，與視圖窗口有關(guān)拖叙，vw表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度赂乐。
vw 相對于視窗的寬度薯鳍，1vw 等于視口寬度的1%，即視窗寬度是100vw
vh 相對于視窗的高度沪猴，1vh 等于視口高度的1%辐啄，即視窗高度是100vh
vmin vw和vh中的較小值
vmax vw和vh中的較大值
效果圖:
響應(yīng)式布局-視圖窗口.gif
代碼:
<template>
<div class="main-box">
視圖窗口布局
<div class="view">
視口布局vw/vh。視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局視圖窗口布局
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.view{
width: 100vw;
height: 100vh;
background: #f90;
}
</style>
4运嗜、rem布局
rem單位的特點: CSS3新增的單位，并且移動端的支持度很高悯舟，單位是動態(tài)根據(jù)html元素的font-size的值進行換算担租，根元素的font-size相當(dāng)于提供了一個基準，當(dāng)頁面的size發(fā)生變化時抵怎，只需修改根元素font-size大小奋救，即可完成適配。例如根元素為37.5px反惕，1rem = 37.5px尝艘。12px = 12 / 37.5 = 0.32rem。
效果圖:
響應(yīng)式布局-rem單位.gif
代碼:
<template>
<div class="main-box">
rem布局
<div class="rem-box">
rem單位
</div>
<div class="text">
px單位
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.rem-box{
width: 5rem;
font-size: 1.2rem;
height: 100%;
background: #09f;
}
.text{
margin-top: 20px;
font-size: 26px;
width: 100px;
height: 50px;
background: #099;
}
</style>
