連云港華舜的客戶網站建設改為自適應
發布于:2015-03-27 10:18  瀏覽:

之前,農場水產網站建設讓小編意識到一個問題,即網站的自適應問題。網站建設好之后,發給客戶看下有什么問題?客戶在看完之后,表示公司幫其制作的網站的qq漂浮框,已經被擠到了網站的版塊文字上了,起初小編以為是客戶用的是老式的電腦,屏幕小。后來,客戶表示自己用的是筆記本電腦,經過試驗過后才發現是網站沒有做自適應。如何解決呢?

自適應網頁設計,既可以自動識別屏幕寬度,做出相應調整的網頁設計。首先,在網頁代碼的首部,加入一行viewport元標簽。<metaname="viewport"content="width=device-width,initial-scale=1"/>viewport是網頁默認的寬度和高度,網頁寬度和屏幕寬度等大小,原始縮放比例(initial-scale=1)為1.0,網頁初始大小和屏幕面積相等。

首先,說下網站高度的自適應,我已經設置div 100%了,怎么還沒效果,我想說的是,有一個關鍵的問題,你沒設置。代碼如下:html,body{height:100%;overflow:hidden;};

網頁需要根據屏幕大小調整布局,建議不使用絕對寬度的布局,也不能使用絕對寬度的元素。例如:css不能指定像素寬度:width:px;只能指定百分比寬度:width:xx%;或者width:auto;流動布局(fluidgrid)各個區塊的位置不能固定不動,是會浮動的;字體大小設置不能用絕對大小,只能使用相對大?。╡m),在HTML頁面上不要使用絕對字體(px),而要使用相對字體(em),對于大多數瀏覽器來說,通常用 em = px/16 換算,例如16px就等于1em;圖片的自適應:img標簽的話,只需要設置 max-width: 100%;或width:100%; 語句為:img { max-width: 98%; },css加載的background-image如何自適應大小呢,其實CSS3中是可以實現的,添加如下語句:background-size:100% 100%;屏幕寬度低于480像素的設備(如iPhone等),網頁側欄隱藏中部內容欄寬度自動調節。以下代碼針對Z-Blog,WordPress相關標簽名稱只需修改一下即可。

@media screen and (max-device-width: 480px) {

   #divMain{

   float: none;

  width:auto;

  }

  #divSidebar {

   display:none;

  }

 }

以上的內容,公司將會在以后的連云港網站建設的單子中,進行應用。

http://www.web0518.com/

 
p62开奖结果走势图