說起手機網站的開發,最讓新手腦大的問題，莫過于網站的自適應了。我當初也被這個問題   困擾得抓耳撓腮，因此總結一些方法希望能幫到大家。
1、使用meta標簽：viewport
H5移動端頁面自適應普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統。
viewport 是用戶網頁的可視區域。翻譯為中文可以叫做"視區"。是自適應的必需代碼。
1
手機瀏覽器是把頁面放在一個虛擬的”窗口”（viewport）中，通常這個虛擬的”窗口”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。
viewport標簽及其屬性：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>1
每個屬性的詳細介紹：
2、使用媒體查詢
媒體查詢是在css3中為解決自適應問題，提供的解決方法。其原理是，在不同的屏幕尺寸使用不同的css樣式。
1
例如：
@media only screen and (max-width: 640px) {
  body {
      font-size：100px；
  }
}12345
3、盡量使用百分比
對圖片或者段落都使用百分比，因為body的默認寬度是屏幕尺寸，都可以根據其父元素，設置百分比。
1
4.使用css3單位rem
rem是CSS3新增的一個相對單位（root em，根em）,指的是相對于HTML根元素的字體大小。默認html的font-size是16px，即1rem=16px。
1
通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。
聰明的程序猿，看到這一功能，發現了進化的機會。于是通過js動態獲取屏幕寬度，設置html的font-size值，即可控制rem單位縮放，即可達到頁面整體適應的效果.
js代碼:
!(function(win, doc){
  function setFontSize() {
      // 獲取window 寬度
      var docEl = doc.documentElement;
      var winWidth = docEl.clientWidth;
     if(winWidth<=640){
      doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;}
      else{
          docEl.style.fontSize=100+"px";
          }
  }
  var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
  var timer = null;
  win.addEventListener(evt, function () {
      setFontSize();
  }, false);
  win.addEventListener("pageshow", function(e) {
      setFontSize();
  }, false);
  // 初始化
  setFontSize();
}(window, document));12345678910111213141516171819202122232425262728
除了上面的方法，類似的方法還有使用響應式框架boostrap，使用em單位等，但就效果和便利程度而言，優先推薦使用rem單位和相應的js，實現移動頁面的自適應。
---------------------
作者：唐大帥
來源：CSDN
原文：https://blog.csdn.net/voke_/article/details/78433505
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

當前名稱：如何解決手機網站的自適應問題
分享地址：http://m.newbst.com/news23/116723.html

成都網站建設公司_創新互聯，為您提供網站建設、外貿網站建設、外貿建站、動態網站、面包屑導航、ChatGPT

廣告

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