監(jiān)理公司管理系統(tǒng) | 工程企業(yè)管理系統(tǒng) | OA系統(tǒng) | ERP系統(tǒng) | 造價(jià)咨詢管理系統(tǒng) | 工程設(shè)計(jì)管理系統(tǒng) | 甲方項(xiàng)目管理系統(tǒng) | 簽約案例 | 客戶案例 | 在線試用
X 關(guān)閉
重慶網(wǎng)站建設(shè)公司

當(dāng)前位置:工程項(xiàng)目OA系統(tǒng) > 泛普各地 > 重慶OA系統(tǒng) > 重慶網(wǎng)站建設(shè)公司

自動(dòng)適應(yīng)網(wǎng)頁如何做?

申請(qǐng)免費(fèi)試用、咨詢電話:400-8352-114

自動(dòng)適應(yīng)網(wǎng)頁設(shè)計(jì)如何做?
         一、自適應(yīng)網(wǎng)頁設(shè)計(jì),既可以自動(dòng)識(shí)別屏幕寬度,做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)。我們做個(gè)試驗(yàn),六個(gè)人士的頭像,當(dāng)屏幕寬度大于1300像素時(shí),6張圖并排在一行。屏幕寬度在600像素-1300像素時(shí),6張圖片分兩行顯示。
  
  如果屏幕寬度在400像素到600像素之間,則導(dǎo)航欄移到網(wǎng)頁頭部。
  
  屏幕寬度在400像素以下,則6張圖片分成三行。
  
  二、網(wǎng)頁寬度自動(dòng)調(diào)整
  
  如何做到上面的現(xiàn)象,洛陽網(wǎng)站建設(shè)人員來給大家介紹下。
  
  首先,在網(wǎng)頁代碼的首部,加入一行viewport元標(biāo)簽。<metaname="viewport"content="width=device-width,initial-scale=1"/>
  
  viewport是網(wǎng)頁默認(rèn)的寬度和高度,網(wǎng)頁寬度和屏幕寬度等大小,原始縮放比例(initial-scale=1)為1.0,網(wǎng)頁初始大小和屏幕面積相等。
  
  三、不建議使用絕對(duì)寬度
  
  網(wǎng)頁需要根據(jù)屏幕大小調(diào)整布局,建議不使用絕對(duì)寬度的布局,也不能使用絕對(duì)寬度的元素。例如:css不能指定像素寬度:
  
  width:px;
  
  只能指定百分比寬度:
  
  width:xx%;
  
  或者
  
  width:auto;
  
  四、字體大小設(shè)置不能用絕對(duì)大小,只能使用相對(duì)大?。╡m)。
  
  五、流動(dòng)布局(fluidgrid)各個(gè)區(qū)塊的位置不能固定不動(dòng),是會(huì)浮動(dòng)的。
  
  六、選擇加載CSS自動(dòng)探測屏幕寬度,然后加載相應(yīng)的CSS文件。
  
  七、CSS的@media規(guī)則
  
  同一個(gè)CSS文件中,可以根據(jù)不同的屏幕分辨率,選擇應(yīng)用不同的CSS規(guī)則。
  
  八、圖片的自適應(yīng)(fluidimage)
  
  除了布局和文本,自適應(yīng)網(wǎng)頁設(shè)計(jì)還必須實(shí)現(xiàn)圖片自動(dòng)縮放。
發(fā)布:2007-03-31 10:13    編輯:泛普軟件 · xiaona    [打印此頁]    [關(guān)閉]
相關(guān)文章:
重慶OA系統(tǒng)
聯(lián)系方式

成都公司:成都市成華區(qū)建設(shè)南路160號(hào)1層9號(hào)

重慶公司:重慶市江北區(qū)紅旗河溝華創(chuàng)商務(wù)大廈18樓

咨詢:400-8352-114

加微信,免費(fèi)獲取試用系統(tǒng)

QQ在線咨詢

泛普重慶網(wǎng)站建設(shè)公司其他應(yīng)用

重慶OA軟件 重慶OA新聞動(dòng)態(tài) 重慶OA信息化 重慶OA客戶 重慶OA快博 重慶OA行業(yè)資訊 重慶軟件開發(fā)公司 重慶網(wǎng)站建設(shè)公司 重慶物業(yè)管理軟件 重慶餐飲管理軟件 重慶倉庫管理系統(tǒng) 重慶門禁系統(tǒng) 重慶微信營銷 重慶ERP 重慶監(jiān)控公司 重慶金融行業(yè)軟件 重慶B2B、B2C商城系統(tǒng)開發(fā) 重慶建筑施工項(xiàng)目管理系統(tǒng)開發(fā)