淺談pc和移動端的響應式

時間 2019-11-17

標籤淺談移動端的響應欄目無線简体版

原文原文鏈接

身爲一個前端攻城獅，是否是常常遇到各類各樣的響應式問題？下面咱們來講一下：css

1.響應式跟自適應有什麼區別?html

有些人可能還不知道響應式跟自適應的區別,甚至認爲他們是同一個東西,其實不是的.前端

自適應是最先出現的，後面纔有了響應式。響應式佈局等於流動網格佈局，而自適應佈局等於使用固定分割點來進行佈局。html5

以下圖所示，對於同一個頁面（圖中的Html），若是用響應式佈局來處理的話，用不一樣設備（電腦、平板、手機）去訪問此頁面，最後看到的佈局和內容有很大不一樣。webpack

而若是用自適應佈局去處理的話，那無論訪問設備如何的不一樣（下圖是三臺尺寸不同的手機），最後看到的頁面內容和佈局基本上仍是同樣的，就是尺寸略有不一樣。css3

響應式網站：https://www.microsoft.com/zh-cn/web

自適應網站：http://m.ctrip.com/html5/bootstrap

2.實現響應式有哪幾種方式?瀏覽器

1.使用媒體查詢(Media Query) 結合 rem字體函數

記住,先在<head>標籤里加入這個meta標籤(設置設備按照一比一的尺寸進行顯示，而且禁止用戶縮放頁面):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

其次是媒體查詢，這個你們應該都知道，這個是響應式最重要的部分。

若是大於1000px，就用：

@media screen and (min-width:1000px){...}              對應PC端頁面

若是在小於1000px和大於768px之間：

@media screen and (max-width:1000px) and (min-width:768px) {...}        對應平板端頁面

若是小於768px：

@media screen and (max-width:768px){...}           對應手機端頁面

而後是rem字體，rem是css3新出的單位，是指相對於根元素的字體大小的單位。通常設置在html,body，結合媒體查詢咱們能夠這樣寫：

@media screen and (min-width:1000px){
　　html,body{
　　　font-size:14px;
　　}
}  
    
@media screen and (max-width:1000px) and (min-width:768px){
　　html,body{
　　　font-size:13px;
　　}
}  

@media screen and (max-width:768px){
　　html,body{
　　　font-size:12px;
　　}
}

而後在樣式表裏面,把px單位都轉換爲rem,這樣rem就會根據咱們在html,body設置的字體單位進行自動縮放的過程.

至於1px等於多少rem呢,我習慣是100px等於1rem,這樣作的好處有兩點:

第一,谷歌瀏覽器的默認字體是12px,小於就失效,若是1rem等於10px的話是沒有任何效果的.第二,容易換算,例如咱們15px的話,就寫0.15rem.

固然還有幾種比較方便的,若是你有使用webpack的話,可使用postcss-pxtorem或者px2rem-loader,它們會把你寫的樣式打包的時候自動轉換爲rem,具體網上有教程.

轉換前:

轉換後:

還有一種就是使用sublime text的插件,cssrem神器!在你輸入的時候就自動轉換了.

這裏介紹一種用js自動計算rem的方法,能夠不用到媒體查詢:

// 基準大小 至關於窗口縮放到設計稿的尺寸時body的字體大小 這裏設置100px 方便計算
  const baseSize = 100
  // 設置 rem 函數
  function setRem() {
    // 當前頁面寬度相對於1280寬的縮放比例，可根據本身須要修改。1280是設計稿的寬度
    const scale = document.documentElement.clientWidth / 1280;
    let autoWidth = Math.round((baseSize * Math.min(scale, 2)));
    //判斷頁面縮放到小於99px的字體時 就再也不縮小 防止內容溢出
    if (Math.round((baseSize * Math.min(scale, 2))) <= 99) {
      autoWidth = 99;
    }
    // 設置頁面根節點字體大小
    document.documentElement.style.fontSize = autoWidth + 'px'
  }
  // 初始化
  setRem()
  // 改變窗口大小時從新設置 rem
  window.onresize = function () {
    setRem()
  }