您現在的位置是:電腦技術吧?>? 編程技術 ??>??自適應網頁設計的步驟,自適應網頁設計教程??>??正文詳情

自適應網頁設計的步驟,自適應網頁設計教程

習凝蝶2019-11-07 15:42:32 人圍觀
簡介自動網頁設計谷歌就適應性網頁設計的概念和方法進行了在線講座通過維護相同的網頁代碼,網站可以在各種瀏覽設備(從臺式電腦顯示器到智能手機或其他移動產品設備)上獲得更好

Google進行了一次在線講座,講述自適應網頁設計的概念和方法,維護同一個網頁代碼,即可使網站在多種瀏覽設備(從桌面電腦顯示器到智能手機或其他移動產品設備)上具有更好的閱讀體驗,將該講座內容簡要的整理如下:  1、在HTML頭部增加viewport標簽。

  在網站HTML文件的開頭,增加viewport meta標簽告訴瀏覽器視口寬度等于設備屏幕寬度,且不進行初始縮放。

代碼如下:  這段代碼支持Chrome、Firefox、IE9以上的瀏覽器,但不支持IE8以及低于IE8的瀏覽器。

  2、在CSS文件尾部增加針對不同屏幕分辨率的規則。

  例如使用如下的代碼,可以讓屏幕寬度低于480像素的設備(如iPhone等),網頁側欄隱藏中部內容欄寬度自動調節。

以下代碼針對Z-Blog,WordPress相關標簽名稱只需修改一下即可。

  3、布局寬度使用相對寬度。

  網頁總體框架可以使用絕對寬度,但往下的內容框架、側欄等最好使用相對寬度,這樣針對不同分辨率進行修改就方便。

當然也可以不用相對寬度,那就需要在 @media screen and (max-device-width: 480px) 里面增加各個div的針對小屏幕的寬度,實際上更麻煩。

  4、頁面使用相對字體  在HTML頁面上不要使用絕對字體(px),而要使用相對字體(em),對于大多數瀏覽器來說,通常用 em = px/16 換算,例如16px就等于1em。

  根據上面講述的幾點內容,我針對我博客的CSS進行了一些修改,發現可以從iPhone手機瀏覽到體驗更佳的頁面,但有一個問題沒有解決,就是頂部導航欄navbar顯示有問題,換行后被下面的文章蓋住了,不知道怎樣能更好地解決這個問題(更新:經過網友提示,在導航欄divNavbar的樣式里,加入 overflow:hidden; 一行即可解決這個問題)。

版權聲明:本文由 習凝蝶 整理編輯。

原標題:網頁設計自適應布局,網頁設計自適應

轉載注明出處:http://www.dn9ww09s.icu/program/11461.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦硬盤壞了,電腦硬盤怎么會壞

    電腦硬盤壞了,電腦硬盤怎么會壞 相關圖片電腦硬盤壞了怎么換計算機在社會上越來越流行硬盤是計算機中非常重要的硬件如果操作不當或使用時間過長,電腦的硬盤就會損壞如果電腦的硬盤壞了,我們的電腦就不能正常工作我...

  • vs代碼提示功能設置,editplus代碼提示功能

    vs代碼提示功能設置,editplus代碼提示功能 相關圖片pycharm代碼提示功能有時一些熟悉的代碼不想被鍵入,并且可以通過鍵入第一個字母直接顯示它們這可以在Dreamweaver中實現,這是我們經常說的代碼提示那我們怎么設置呢下面的編輯器會...

  • 筆記本沒有聲音怎么解決,筆記本突然沒聲音了

    筆記本沒有聲音怎么解決,筆記本突然沒聲音了 相關圖片筆記本沒聲音怎么恢復在使用筆記本電腦的過程中,如果突然沒有聲音,會給人們帶來很大的麻煩如果筆記本電腦沒有聲音,聽不到音樂,看視頻時,不知道里面的人在說什么,也不能...

  • 背景圖片,星空背景圖片教程

    背景圖片,星空背景圖片教程 相關圖片ppt背景圖片一套背景圖像有許多屬性要處理幸運的是,您可以使用背景來處理所有事情:合并了以下屬性:您可以為大多數HTML元素設置背景圖像,而不僅僅是整個頁面,這可以用來進行...

  • 電腦密碼忘記了,電腦密碼忘記了怎么辦

    電腦密碼忘記了,電腦密碼忘記了怎么辦 相關圖片電腦怎么設置密碼通常,我們會為計算機設置密碼,以防止未經授權的人自動操作您的計算機但同時,也帶來了一個問題,就是你可能會忘記自己的密碼,不僅別人打不開,你自己也打...

  • 為什么電腦關不了機怎么解決,為什么電腦關不了機了

    為什么電腦關不了機怎么解決,為什么電腦關不了機了 相關圖片筆記本電腦關不了機怎么解決我想很多人都遇到過電腦不能關機的問題有時這個問題是因為太多的程序正在運行,很多人喜歡直接關閉,忽略這些正在運行的程序這樣,計算機的內部系...

  • 滾動條屬性,滾動條的默認屬性是

    滾動條屬性,滾動條的默認屬性是 相關圖片窗體的滾動條屬性在哪Div滾動條是通過Div標簽將CSS樣式表嵌入到Div標簽中當div定義的區域內容達到一定級別時,在div標記中嵌入CSS樣式表,定義溢出的屬性值,并設置與di水平滾動條的屬...

  • 移動硬盤是否需要分區,硬盤怎么分區

    移動硬盤是否需要分區,硬盤怎么分區 相關圖片移動硬盤怎么重新分區現在市場上很多移動硬盤都是標準硬盤在這些標準硬盤的基礎上,還有微型硬盤當然,硬盤分區仍然是個問題分區需要手動完成移動硬盤如何分區這是許多移動硬...

  • 有浮雕特效的軟件,如何做浮雕

    有浮雕特效的軟件,如何做浮雕 相關圖片浮雕字制作解脫對你來說并不新鮮在日常生活中你經常能看到它公園、歷史博物館官員和其他地方總是裝飾著浮雕作為一個閃光燈,你可以使用自己的利器和閃光燈來設計自己的浮雕那...

  • 筆記本固態硬盤怎么安裝,筆記本固態硬盤安裝

    筆記本固態硬盤怎么安裝,筆記本固態硬盤安裝 相關圖片固態硬盤安裝系統說到硬盤,我想你應該熟悉它硬盤可以分為兩種類型,一種是固態硬盤,另一種是傳統的機械硬盤如果比較這兩種硬盤,固態硬盤的速度會更快如何安裝固態驅動器接...

熱評文章

  • 筆記本電腦黑屏怎么辦恢復,為什么筆記本電腦黑屏

    筆記本電腦黑屏怎么辦恢復,為什么筆記本電腦黑屏 相關圖片聯想筆記本電腦黑屏按什么鍵恢復在使用筆記本電腦的過程中遇到故障是最煩人的事情,但這種故障是不可避免的,這就要求我們平時積累更多相關的計算機知識,以備不時之需,例如...

  • 電腦硬件檢測,怎樣檢測電腦硬件損壞

    電腦硬件檢測,怎樣檢測電腦硬件損壞 相關圖片電腦硬件故障檢測一臺完整的計算機由硬件和軟件組成如果您了解計算機的硬件,將為我們下次安裝各種硬件驅動程序帶來極大的方便而看一臺電腦是好的,首先,從硬件配置的角度來...

  • 立體按鈕,ai做立體按鈕

    立體按鈕,ai做立體按鈕 相關圖片ps制作立體按鈕標題立體聲按鈕-www.cxybl.com/Title style type=text/CSS?elbutton{顏色:?000000;字體大小:12px;字體ps立體木質按鈕...

  • 電腦開機黑屏,只有鼠標,win7電腦黑屏只有鼠標

    電腦開機黑屏,只有鼠標,win7電腦黑屏只有鼠標 相關圖片電腦黑屏但是鼠標能動如今,計算機是人們生活中非常重要的電子產品,幾乎占據了人們生活的大部分,因此計算機在使用過程中還會出現一些故障有時我們打開電腦的黑屏,只有鼠標...

  • 特殊字符,特殊字符輸入

    特殊字符,特殊字符輸入 相關圖片特殊字符不顯示在制作網頁時,我們經常插入一些特殊的字符今天,我將介紹如何在Dreamweaver中插入特殊字符在Dreamweaver軟件右側的浮動窗口中找到插入項,點擊常用word的特殊字符是如何...

  • 性價比最高的監聽耳機,監聽耳機什么牌子的好用

    性價比最高的監聽耳機,監聽耳機什么牌子的好用 相關圖片最好的監聽耳機使用過監聽耳機的用戶會知道,通過監聽耳機,他們可以聽到最接近真實的純凈音質,而無需任何修改廣泛應用于錄音棚、配音室、電視臺、廣播電臺、MIDI演播室等領域...

  • 取消文字背景顏色,復制文字有背景顏色

    取消文字背景顏色,復制文字有背景顏色 相關圖片ps文字背景色這似乎是一個不必要的功能,但對于一向喜歡個性的人來說,這是一種有益的嘗試,就像挑戰一樣,去收集創新在網頁上選擇文本時,將顯示藍色背景這似乎是微軟的默認做...

  • 酷睿i7和i5的區別,英特爾i5和i7的區別

    酷睿i7和i5的區別,英特爾i5和i7的區別 相關圖片i7i5處理器區別很多人在選擇計算機時對核心處理器的選擇不是很清楚哪個更好,i5還是i7恐怕演出不好我覺得很貴我覺得沒必要實際上,我不了解這兩個系列的處理器定位現在,我把Co...

  • 文本,將圖片文字轉換為文本

    文本,將圖片文字轉換為文本 相關圖片照片轉換文字今天,讓我們先簡單介紹一下如何使用Dreamweaver制作網頁首先讓我們看看如何在Dreamweaver中輸入文本,我們在Dreamweaver站點中打開一個提取文字...

  • 電腦機箱配置推薦,中關村在線電腦組裝

    電腦機箱配置推薦,中關村在線電腦組裝 相關圖片怎么組裝電腦無論是組裝機還是品牌機,對很多人來說,購買電腦都是一個不錯的選擇對于老手來說,電腦安裝配置列表必須非常簡單,而對于新手來說,則必須非常令人擔憂那么我們...

關注微信

变脸官网查询