說起手機網(wǎng)站的開發(fā),最讓新手腦大的問題，莫過于網(wǎng)站的自適應(yīng)了。我當(dāng)初也被這個問題   困擾得抓耳撓腮，因此總結(jié)一些方法希望能幫到大家。
1、使用meta標簽：viewport
H5移動端頁面自適應(yīng)普遍使用的方法，理論上講使用這個標簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
viewport 是用戶網(wǎng)頁的可視區(qū)域。翻譯為中文可以叫做"視區(qū)"。是自適應(yīng)的必需代碼。
1
手機瀏覽器是把頁面放在一個虛擬的”窗口”（viewport）中，通常這個虛擬的”窗口”（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。
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中為解決自適應(yīng)問題，提供的解決方法。其原理是，在不同的屏幕尺寸使用不同的css樣式。
1
例如：
@media only screen and (max-width: 640px) {
  body {
      font-size：100px；
  }
}12345
3、盡量使用百分比
對圖片或者段落都使用百分比，因為body的默認寬度是屏幕尺寸，都可以根據(jù)其父元素，設(shè)置百分比。
1
4.使用css3單位rem
rem是CSS3新增的一個相對單位（root em，根em）,指的是相對于HTML根元素的字體大小。默認html的font-size是16px，即1rem=16px。
1
通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。
聰明的程序猿，看到這一功能，發(fā)現(xiàn)了進化的機會。于是通過js動態(tài)獲取屏幕寬度，設(shè)置html的font-size值，即可控制rem單位縮放，即可達到頁面整體適應(yīng)的效果.
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
除了上面的方法，類似的方法還有使用響應(yīng)式框架boostrap，使用em單位等，但就效果和便利程度而言，優(yōu)先推薦使用rem單位和相應(yīng)的js，實現(xiàn)移動頁面的自適應(yīng)。
---------------------
作者：唐大帥
來源：CSDN
原文：https://blog.csdn.net/voke_/article/details/78433505
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

當(dāng)前名稱：如何解決手機網(wǎng)站的自適應(yīng)問題
分享地址：http://aaarwkj.com/news23/116723.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、動態(tài)網(wǎng)站、面包屑導(dǎo)航、ChatGPT

廣告

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