如何在pc和移動端中實現響應式-創(chuàng)新互聯(lián)

這篇文章給大家介紹如何在pc和移動端中實現響應式，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

五通橋網站建設公司成都創(chuàng)新互聯(lián)公司,五通橋網站設計制作，有大型網站制作公司豐富經驗。已為五通橋近千家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站制作要多少錢，請找那個售后服務好的五通橋做網站的公司定做！

1.響應式跟自適應有什么區(qū)別?


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

自適應是最早出現的，后面才有了響應式。響應式布局等于流動網格布局，而自適應布局等于使用固定分割點來進行布局。

如下圖所示，對于同一個頁面（圖中的Html），如果用響應式布局來處理的話，用不同設備（電腦、平板、手機）去訪問此頁面，最后看到的布局和內容有很大不同。

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

如何在pc和移動端中實現響應式

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

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

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,具體網上有教程.

轉換前:

如何在pc和移動端中實現響應式

轉換后:

如何在pc和移動端中實現響應式

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

如何在pc和移動端中實現響應式

這里介紹一種用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;
    }
    // 設置頁面根節(jié)點字體大小
    document.documentElement.style.fontSize = autoWidth + 'px'
  }
  // 初始化
  setRem()
  // 改變窗口大小時重新設置 rem
  window.onresize = function () {
    setRem()
  }

這樣只要把樣式表的px單位都轉換為rem即可.

2.使用插件(bootstrap)

柵格化布局，本例利用bootstarp的柵格系統(tǒng)

如何在pc和移動端中實現響應式

根據上圖可以看到,只要在class加上bootstrap獨有的Class前綴,就可以使用bootstrap了,當然你得先引入bootstrap的插件.示例:

<div class="col-xs-6 col-sm-3"></div>

這段代碼的意思是在小于768px的尺寸下,這個div是占用一半的位置的,而在>=768px且<992px直接,這個div只占三分之一的位置.

這樣就可以根據不同的屏幕尺寸來達到響應式效果.

關于如何在pc和移動端中實現響應式就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站欄目：如何在pc和移動端中實現響應式-創(chuàng)新互聯(lián)
文章分享：http://bm7419.com/article40/dssdeo.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網站、App設計、網頁設計公司、定制網站、網站內鏈、手機網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

商城網站建設