應該如何制作(do)自适應網頁?

發布時(hour)間:2020-06-16 14:10:37 浏覽次數:20

什麽是(yes)自适應網頁?
  自适應網頁隻能根據用(use)戶行爲(for)和(and)設備環境進行布局。 這(this)個(indivual)概念是(yes)在(exist)2010年5月提出(out)的(of)。簡單來(Come)說,網頁可以(by)根據浏覽界面的(of)大(big)小顯示自己,從而可以(by)使用(use)戶在(exist)浏覽網站時(hour)獲得更好的(of)體驗。
  那我(I)們(them)該怎麽辦呢?
  1.設置元标記
  通常,移動終端主要(want)基于(At)手機,因此該代碼不(No)能與視口元代碼分開。 如圖所示:
  2.使用(use)媒體查詢
  媒體查詢隻是(yes)希望成爲(for)網頁和(and)浏覽器之間的(of)中介。 他(he)可以(by)告訴浏覽器如何使網頁更好地(land)顯示。 如圖所示:
  3.字體适應
  通常,網站中使用(use)的(of)字體單位主要(want)是(yes)PX(像素)。 盡管這(this)是(yes)事實,但對于(At)自适應網站,他(he)需要(want)自适應的(of)自适應字體。 該字體應與他(he)的(of)父容器的(of)寬度有關,以(by)便它可以(by)适應移動屏幕。  css3引入了(Got it)一(one)個(indivual)稱爲(for)rem的(of)新單元,類似于(At)em,但是(yes)rem使用(use)起來(Come)更方便。  rem是(yes)相對于(At)根元素的(of)。 編寫代碼時(hour),請不(No)要(want)忘記根元素的(of)字體大(big)小。
  4.響應圖片
  對于(At)圖片,我(I)們(them)可以(by)通過CSS樣式的(of)max-width控制圖片的(of)最大(big)寬度,如下圖所示:
  像背景圖片一(one)樣,它可以(by)通過background-size設置,background-size是(yes)css3的(of)新屬性,用(use)于(At)設置背景圖片的(of)大(big)小,有兩個(indivual)可選值,第一(one)個(indivual)值用(use)于(At)指定圖片的(of)寬度 背景圖像,第二個(indivual)A值用(use)于(At)指定背景圖像的(of)高度。 如果僅指定一(one)個(indivual)值,則另一(one)個(indivual)值默認爲(for)自動。 背景大(big)小:cover; 按比例擴大(big)圖片以(by)填充元素; 背景大(big)小:包含; 按比例縮小圖片以(by)适合元素的(of)大(big)小。
  最後,編輯要(want)強調的(of)是(yes),響應式網頁的(of)寬度不(No)應固定。 最好使用(use)百分比。 如果有任何意見或錯誤,希望大(big)家關注并留言!

網站建設

深圳市维缇网络科技有限公司提供網站建設,網站制作(do),網站開發,網站設計,網頁開發,網站定制,網頁設計等服務,幫助企業提高知名度和(and)影響力,提高企業網上(superior)競争力。我(I)們(them)的(of)客戶來(Come)自各行各業,爲(for)了(Got it)共同目标,工作(do)上(superior)密切配合,從創業型小企業到(arrive)行業有影響力的(of)網站建設公司,感謝他(he)們(them)對我(I)們(them)的(of)高要(want)求,感謝他(he)們(them)從不(No)同領域給我(I)們(them)帶來(Come)的(of)挑戰,讓我(I)們(them)的(of)團隊用(use)頭腦與智慧給客戶帶來(Come)驚喜。


閱讀推薦
關閉

在(exist)線留言