vue/原生頁面實現響應式布局

在現在開發的時候，公司要求一套代碼適配pc端，移動端的需求也日漸增加，所以我們也就需要讓代碼實現響應式的效果。這里我已知的方法有兩個，當然大佬除外。

一：使用CSS3的@media查詢

1.1首先我們進行百度搜索

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

當然用着效果還是不錯。

.img {
  width: 100%;
  height: 15.25rem;
}
@media screen and (max-width: 700px) {
  .img {
    width: 100%;
    height: 6.25rem;
  }
}

我這個寫的就是寬度小於700px的時候img的高度變成6.25rem,默認的高度是15.25rem

這是他的部分參數，其他的參數一般也用的較少，需要的可以百度了解一下

1.2引入

引入的話就是跟上面的實例一樣的方式，也就是一段是你默認的樣式，一段是你改變屏幕后的樣式寫上去就可以實現效果了。

 

二：使用常用的Bootstrap響應式設計

2.1下載Bootstrap的css,當然也可以使用地址形式的，但是有時候地址形式的在加載中會出現緩慢的效果

這就是他們的官網 https://www.bootcss.com/

2.2選擇你想要的版本

因為它的每個版本有一絲絲不同，但是基本還是差不多的，所以就需要選擇好你需要的版本

2.3根據官網的引入教程，和實例進行開發

官網里面在每個版本中都會有教程，叫你如何使用，也有不少的組件提供給大家。