怎么制作HTML5頁(yè)面讓它適應(yīng)電腦和手機(jī)的尺寸？

、利用meta標(biāo)簽

Meta標(biāo)簽主要用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的屬性，如作者、日期時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵詞、頁(yè)面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁(yè)利于搜索引擎。

解釋：Viewport指用戶網(wǎng)頁(yè)的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁(yè)面寬度初始比例為1，最小比例為1，最大比例為1，用戶不可擴(kuò)展，頁(yè)面不可縮放。

以上標(biāo)簽只支持一種尺寸，正確的做法是用js動(dòng)態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.);

if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }

else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }

else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

</script>

2、百分比法

CSS中的百分比中指的是相對(duì)于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。

3、使用CSS3單位rem

在頁(yè)面載入開(kāi)始時(shí)首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請(qǐng)自行查閱），假設(shè)寬度為W，一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1，如果html的font-size為100px，那么這個(gè)div的寬度用rem表示是多少呢？

計(jì)算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個(gè)合適的font-size，計(jì)算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。

所以會(huì)在頭部加上這個(gè)JS代碼：

var html = document.querySelector(‘html‘);

var rem = html.offsetWidth / 6.4;

html.style.fontSize = rem + "px";

</script>

4、媒體查詢

媒體查詢正是為解決網(wǎng)頁(yè)適應(yīng)手機(jī)屏幕。媒體查詢的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁(yè)面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁(yè)面中的class="icon"的元素設(shè)置樣式，可以這樣寫(xiě)，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

以上幾種方法，僅供大家參考。如有不妥，歡迎指正。制作自適應(yīng)頁(yè)面需要比較好的編程基礎(chǔ)和技術(shù)覺(jué)悟，一般的小白，不建議大家為了做自適應(yīng)網(wǎng)頁(yè)專門(mén)學(xué)習(xí)HTML5、CSS3和JS，畢竟這并非一朝一夕就能學(xué)會(huì)的。如果技術(shù)小白想做自適應(yīng)網(wǎng)頁(yè)，這里給大家提供一種思路，用建站寶盒。完全不需要編程基礎(chǔ)，全程拖拽，一樣能做出讓人驚艷的自適應(yīng)網(wǎng)站。現(xiàn)在還有免費(fèi)建站活動(dòng)，無(wú)論外行內(nèi)行，大家可以注冊(cè)體驗(yàn)一下。

零基礎(chǔ)免費(fèi)做HTML5自適應(yīng)網(wǎng)站：http://www.iisp.com/design/free-site.php?s=yuqiuping

機(jī)app個(gè)人中心頁(yè)面模板源碼

app 內(nèi)嵌H5頁(yè)面，個(gè)人中心頁(yè)面模板，包含列表按鈕圖片 icon 搜索布局上傳對(duì)話框。

手機(jī)演示地址：http://www.17sucai.com/preview/10221/2017-01-20/ceshi/index.html — my-read.html — my-secure.html — my-put.html — my-up.html

html5 css3手機(jī)app登錄頁(yè)面模板下載

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22887

藍(lán)色的采購(gòu)信息管理系統(tǒng)手機(jī)界面wap模板

手機(jī)版大氣信息管理系統(tǒng)界面模板

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22475

藍(lán)色通用的手機(jī)app登錄注冊(cè)頁(yè)面模板

藍(lán)色的手機(jī)登錄模板

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22480

蘋(píng)果ios風(fēng)格企業(yè)博客網(wǎng)站手機(jī)模板

蘋(píng)果風(fēng)格

手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/20946

5移動(dòng)端頁(yè)面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。

使用viewport標(biāo)簽

在HTML文檔頭部添加viewport標(biāo)簽，設(shè)置meta屬性值為“width=device-width”，可以讓瀏覽器根據(jù)設(shè)備屏幕的寬度自動(dòng)調(diào)整頁(yè)面的縮放比例，從而實(shí)現(xiàn)頁(yè)面自適應(yīng)。

<meta 
	name="viewport" 
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, 
	maximum-scale=1.0, 
  user-scalable=no"/>

每個(gè)屬性的詳細(xì)介紹：

width：#viewport 的寬度，可以指定為一個(gè)像素值，如：600，或者為特殊的值，如：device-width （設(shè)備的寬度）。

height：#viewport的高度。

initial-scale：#初始縮放比例，即當(dāng)瀏覽器第一次加載頁(yè)面時(shí)的縮放比例。

maximum-scale：#允許瀏覽者縮放到的最大比例，一般設(shè)為1.0。

minimum-scale：#允許瀏覽者縮放到的最小比例，一般設(shè)為1.0。

user-scalable：#瀏覽者是否可以手動(dòng)縮放，yes或no。

使用CSS3媒體查詢

媒體查詢可以根據(jù)設(shè)備屏幕的寬度和高度來(lái)匹配不同的樣式規(guī)則，從而實(shí)現(xiàn)響應(yīng)式布局。通過(guò)設(shè)置不同的CSS樣式，可以讓頁(yè)面在不同的設(shè)備上呈現(xiàn)不同的布局和樣式。

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設(shè)備上應(yīng)用以下樣式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設(shè)備上應(yīng)用以下樣式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設(shè)備上應(yīng)用以下樣式 */
  body {
    font-size: 18px;
  }
}

使用彈性布局

彈性布局可以根據(jù)設(shè)備屏幕的寬度自動(dòng)調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁(yè)面自適應(yīng)。通過(guò)設(shè)置元素的flex屬性，可以讓元素按照一定的比例分配剩余空間，從而實(shí)現(xiàn)頁(yè)面的自適應(yīng)性。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 1 300px;
  margin: 10px;
}

使用rem單位

rem單位是相對(duì)于根元素(html元素)的字體大小來(lái)計(jì)算的單位，可以根據(jù)設(shè)備屏幕的字體大小自動(dòng)調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁(yè)面自適應(yīng)。通過(guò)設(shè)置根元素的字體大小，可以讓整個(gè)頁(yè)面的元素按照一定的比例進(jìn)行縮放。

html {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設(shè)備上將根元素的字體大小設(shè)置為14px */
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設(shè)備上將根元素的字體大小設(shè)置為16px */
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設(shè)備上將根元素的字體大小設(shè)置為18px */
  html {
    font-size: 18px;
  }
}

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em）,使用rem為元素設(shè)定字體大小時(shí)，是相對(duì)大小，但相對(duì)的只是HTML根元素。通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

(其他)默認(rèn)html的font-size是16px，即1rem=16px，如果某p寬度為32px你可以設(shè)為2rem。

通常情況下，為了便于計(jì)算數(shù)值則使用62.5%，即默認(rèn)的10px作為基數(shù)。當(dāng)然這個(gè)基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：

Html{font-size:62.5%(10/16*100%)}

具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過(guò)CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過(guò)js一次定義方法如下：

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據(jù)你設(shè)置的html的font-size屬性值做適當(dāng)?shù)淖兓?        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

使用vw、vh單位

vw和vh是根據(jù)設(shè)備的寬度和高度來(lái)決定的，設(shè)備的寬就是100vw，設(shè)備的高就是100vh，
你設(shè)置的50vw就是相當(dāng)于設(shè)備寬度的50%，你設(shè)置的100vh就是相當(dāng)于設(shè)備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設(shè)置100vh，那么基本上(設(shè)備的寬小于高的情況)就會(huì)超出你的屏幕X軸出現(xiàn)滾動(dòng)條。如果你給元素高度設(shè)置100vw，那么就滿足不了你想要把這個(gè)元素鋪滿整個(gè)設(shè)備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。

使用方法：
1. 將設(shè)計(jì)圖放到PS里面，查看整個(gè)圖片的寬度和高度，分別放在設(shè)計(jì)稿寬度和設(shè)計(jì)稿高度當(dāng)中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當(dāng)中。（注意還是px單位哦）
3. 然后點(diǎn)擊換算按鈕，就可以將換算出來(lái)的寬度和高度大小放置到你的代碼當(dāng)中了哦。（注意是vw和vh單位哦）

一般移動(dòng)端的布局可分為三個(gè)部分，頭部->主體->tabbar的腳部。
所以我們可以把項(xiàng)目的外層這樣設(shè)置一下：

.body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* 頭部部分 */
header {
	height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計(jì)圖調(diào)整 */
}
/* 主體部分 */
main {
	flex: 1; /* 占據(jù)頁(yè)面剩余所有部分 */
}
/* tabbar腳部部分 */
footer {
	height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計(jì)圖調(diào)整 */
}

使項(xiàng)目中的字體大小自適應(yīng)：

在線咨詢

上一篇：20201119登錄頁(yè)面模板的制作
下一篇：計(jì)算科學(xué)如何幫助中國(guó)制造業(yè)成為全球領(lǐng)導(dǎo)者？2021 CCF CTO高峰論壇

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商