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

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

稅慧艷2019-11-18 10:50:34 人圍觀
簡介自動網頁設計自適應布局將成為未來的發展趨勢。本設計滿足以下要求:1。根據用戶窗口的大小進行更改。在一定寬度范圍內提供穩定的視覺體驗。缺點是與老的和非標準的瀏覽器兼容

自適應的布局未來會成為潮流,這種設計同時滿足了1.根據用戶窗口大小的不同做出改變2.在一定寬度范圍內提供穩定的視覺體驗缺點則有對老舊和非標準瀏覽器的兼容性較差,對產品定義和設計能力的要求較高,對頁面做出調整時需要同時改變多種尺寸下的布局下面就說說自適應網頁設計的方法:1、在HTML頭部增加viewport標簽。

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

代碼如下:  meta name=viewport content=width=device-width, initial-scale=1 /  這段代碼支持Chrome、Firefox、IE9以上的瀏覽器,但不支持IE8以及低于IE8的瀏覽器。

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

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

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

@media screen and (max-device-width: 480px) {#divMain{float: none;width:auto;}#divSidebar {display:none;}}3、布局寬度使用相對寬度。

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

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

4、頁面使用相對字體  在HTML頁面上不要使用絕對字體(px),而要使用相對字體(em),兩者換算關系是:em = px/16 ,例如16px就等于1em。

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

  總之,根據上面四步進行修改的話,可以很簡單地將一個網站修改為適合多種設備瀏覽的頁面,這對于通過手機訪問網站的用戶來說,的確是一件好事。

版權聲明:本文由 稅慧艷 整理編輯。

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

轉載注明出處:http://www.dn9ww09s.icu/assemble/13478.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • wapi啥意思,wapi需要開啟嗎

    wapi啥意思,wapi需要開啟嗎 相關圖片wapliPhone7發布后,用戶開始發現WLAN中有一個以前從未出現過的功能WAPI。什么意思?有什么用?WAPI是WLAN加密證書,全名是WLAN auth啟用wapi耗電嗎...

  • 網易云分享歌曲短視頻,網易云視頻怎么下載到本地

    網易云分享歌曲短視頻,網易云視頻怎么下載到本地 相關圖片網易云課題網易云音樂不僅可以聽歌曲,還具有有趣的短視頻功能。如何下載網易云音樂短片?現在,超人軟件編輯將介紹如何下載網易云音樂短片,希望對您有所幫助!網易云音樂短...

  • 指針的用法,this指針的用法

    指針的用法,this指針的用法 相關圖片C 指針如何使用C 的指針?在C 中,指針的使用頻率更高。對于C 中大量的指針用法,有必要搞混。今天,綠茶編輯器總結了指針在C 中的用法,并將其呈現給大家,希望c語言指針用法...

  • datauser是什么意思,userdata是什么文件

    datauser是什么意思,userdata是什么文件 相關圖片91userdata是什么意思用戶數據是指用戶數據,它是計算機中的系統文件之一。如果刪除UserData生成的XML并再次打開頁面,JS將報告無效數據UserData數據是由計算機操作生成的五件套里userda...

  • 酷炫的網站,國內酷炫的網站

    酷炫的網站,國內酷炫的網站 相關圖片酷炫在HTML5出現之后,它以炫目華麗的視覺效果吸引了人們的眼球。許多令人驚奇的想法很容易實現。今天,我們收集了21個獨特的HTML5 CSS3網站來展示你的膝蓋。炫酷網站設計...

  • 12306 常用聯系人上限,12306常用聯系人上限是多少

    12306 常用聯系人上限,12306常用聯系人上限是多少 相關圖片12306添加常用聯系人在購買火車票和高鐵車票時,出于安全考慮,我們將使用12306官方應用程序購買車票。為了方便起見,想買票的小伙伴通常會加入普通聯系人一起買票。但是,需要注...

  • 圖形元件,怎樣創建圖形元件

    圖形元件,怎樣創建圖形元件 相關圖片圖形元件的作用同步一天的客戶要求您在網站的頁面上創建公司角色徽標。您可以使用多個關鍵幀和修補動畫沿引線設置其角色(嵌套在組件中)的動畫,將其作為最終版本提供給客戶...

  • 楊虎圍匡是什么意思,四上四下是什么意思

    楊虎圍匡是什么意思,四上四下是什么意思 相關圖片processon教程Processon是一個在線思維導圖制作平臺。您可以直接使用processon online構建思維導圖、流程圖和其他內容,而無需下載。這是一個非常強大和易于使流程圖processon導出...

  • HTML語義化,HTML語義化的理解

    HTML語義化,HTML語義化的理解 相關圖片html語義化標簽有哪些家里有一個熊孩子,經常會發生一些意想不到的事情:當他回家時,他會過來對臭爸爸哭笑不得;當你讓他穿上鞋子時,他會把鞋子抬起來扔到樓下孩子的世界里。...

  • excel里怎么做下拉菜單,07excel下拉菜單怎么做

    excel里怎么做下拉菜單,07excel下拉菜單怎么做 相關圖片excel一級下拉菜單怎么做我們通常使用Excel來記錄表格數據。事實上,excel功能強大,并具有其他有趣和實用的功能。例如,許多人已經看到了Excel的下拉菜單,但是他們不知道怎么做1e...

熱評文章

  • chaton,miaouchaton

    chaton,miaouchaton 相關圖片mon chaton很多人覺得聊天有點奇怪。看著手機上的聊天,他們不知道是否可以刪除。Chaton實際上是三星推出的一款聊天軟件Chaton是一款跨平臺的聊天軟件,IOS,Andrchaton是什么軟件...

  • 如何導入導出ABAP程序,發那科程序導入和導出

    如何導入導出ABAP程序,發那科程序導入和導出 相關圖片如何進行數據庫的導入和導出對于我們的審計人員來說,Oracle數據庫應該是熟悉和陌生的。我們所熟悉的是,在計算機輔助審計中,經常從被審計單位的Oracle數據庫中導出數據,然后導...

  • 3dmax2015序列號和密匙,3dmax的序列號和密鑰

    3dmax2015序列號和密匙,3dmax的序列號和密鑰 相關圖片3dmax2014序列號激活碼3DMAX是一款經典的三維動畫渲染制作軟件,從事設計行業的朋友不會陌生。3dmax2012是一個經典的版本,它提供了一個新的創造性的工具集,增強了迭代工作流和加3d...

  • 蘋果id是什么意思,appleid忘記了怎么辦

    蘋果id是什么意思,appleid忘記了怎么辦 相關圖片蘋果id此時無法創建您的賬戶如果蘋果手機用戶想很好地使用iPhone,首先需要了解一個概念,即什么是蘋果ID蘋果ID是蘋果下的一個安全認證系統。它將所有功能集成到一個帳戶中,允許...

  • js和css做網頁,css和js

    js和css做網頁,css和js 相關圖片js添加css最近,我們可以在網站和博客上找到各種各樣的動畫效果。Codyhouse介紹了這些CSS和JavaScript編碼教程,因為每個文件都可以作為一個整體下載,它可以html css js電子版...

  • sublime text3是什么,sublimetext

    sublime text3是什么,sublimetext 相關圖片sublime text怎么運行普通用戶可能不知道sublime text 3是什么,但對于編碼人員來說,sublime text 3必須很熟悉。Sublime文本:它是一個經典的代碼編輯器,sublime text使用教程...

  • HTTP,HTTP是什么

    HTTP,HTTP是什么 相關圖片HTTP下載HTTP定義了與服務器交互的不同方法。有四種基本方法:獲取、發布、放置和刪除。URL的全名是資源描述符。我們可以這樣認為:URL地址用于描述網絡上的資源,而htHTTP協議的功能...

  • dll修復,msvcr80dll丟失怎么修復

    dll修復,msvcr80dll丟失怎么修復 相關圖片怎樣安裝msvcr80dll相信很多玩家和朋友在運行游戲時,偶爾會遇到由于msvcr120.dll丟失而導致的程序錯誤。如何修復msvcr120.dll?如何安裝msvcr120.dllmsvcr100dll...

  • canvas標簽,canvas標簽方法

    canvas標簽,canvas標簽方法 相關圖片canvas標簽的作用HTML5畫布標簽,以實現刮刮卡效果你曾經玩過刮刮卡嗎?意外得獎的人。今天,我想分享一個基于HTML5技術的刮卡效果。只需在PC上按住鼠標,只需在手機上按住手指canv...

  • surface rt越獄,surface rt2越獄

    surface rt越獄,surface rt2越獄 相關圖片surface rt怎么樣2012年,為了對抗蘋果的iPad,微軟推出了自己的平板電腦surface RT,當時很流行,不過現在看起來不太好。然而,許多用戶發現surface-RT存在一surface rt 破解...

關注微信

变脸官网查询