如何解決手機(jī)網(wǎng)站的自適應(yīng)問題

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

當(dāng)前名稱：如何解決手機(jī)網(wǎng)站的自適應(yīng)問題
分享地址：http://www.muchs.cn/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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)