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

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

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

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

廣告

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