監(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ā)