響應式網站遵循原則及優劣對比

随着現在(zài)很多移動設備的(de)出(chū)現，例如手機、IPod、移動字典等移動産品的(de)出(chū)現，做網站建設不(bù)單單隻是(shì)考慮電腦上(shàng)面的(de)界面，更要(yào / yāo)考慮到(dào)其他(tā)設備的(de)界面設計顯示。所以(yǐ)響應式網站就(jiù)由此出(chū)現了(le／liǎo)，還要(yào / yāo)求網站可以(yǐ)随着自己的(de)喜好進行變化，因此響應式網站便應運而(ér)生，但是(shì)在(zài)技術上(shàng)也(yě)要(yào / yāo)做一(yī / yì ／yí)些新的(de)突破，那響應式網站的(de)前端設計該如何做?接下來(lái)給大(dà)家分享一(yī / yì ／yí)些響應式網站的(de)前段設計的(de)經驗。東莞向揚網絡網絡從事網站建設多年，也(yě)總結了(le／liǎo)一(yī / yì ／yí)建站方面的(de)經驗，下面就(jiù)來(lái)讨論下響應式網站遵循原則及優劣對比。

響應式網站應該遵循哪些設計原則呢？

第一(yī / yì ／yí)、設置百分比
解決縮放問題的(de)方法有很多種，最适合初學者是(shì)一(yī / yì ／yí)個(gè)百分比的(de)布局，在(zài)按鍵寬度設置百分比可以(yǐ)起到(dào)意想不(bù)到(dào)的(de)效果：
box1{ width:100%;}
ul{ margin:02%;}

我不(bù)推崇所有的(de)都用百分比來(lái)布局，但有時(shí)可能大(dà)大(dà)減少工作量，給box1寬度設置100%後，它會自動填充整個(gè)浏覽器的(de)寬度，無論你是(shì)移動PC的(de)分辨率是(shì)多少。它總是(shì)有很好的(de)表現。這(zhè)時(shí)你給box1下面的(de)ul設置左右2%的(de)margin也(yě)是(shì)如此，改變浏覽器窗口的(de)UL實際margin大(dà)小會随着改變，這(zhè)樣講相信大(dà)家都能理解的(de)百分比分布的(de)概念。

第二、控制大(dà)小
習慣使用PC頁面前端開發人(rén)員可能更喜歡使用電腦來(lái)控制大(dà)小，但在(zài)響應類型頁面出(chū)現更多的(de)是(shì)em和(hé / huò)rem，使用它們來(lái)控制字體大(dà)小，甚至框體的(de)大(dà)小的(de)整體效果是(shì)非常明顯的(de)。打個(gè)比方，我設置字體爲(wéi / wèi)20px、10px、30px三種不(bù)同的(de)大(dà)小，在(zài)不(bù)同的(de)地(dì / de)方自然字體網站将尺寸上(shàng)的(de)差異，這(zhè)是(shì)不(bù)可避免的(de)，如果一(yī / yì ／yí)個(gè)頁面足夠複雜或文本的(de)字體大(dà)小設置是(shì)足夠多的(de)，這(zhè)也(yě)是(shì)一(yī / yì ／yí)個(gè)非常大(dà)的(de)工作量：不(bù)過在(zài)響應式頁面中你設計完它們并不(bù)是(shì)完事，你用手機浏覽網頁會發現字體就(jiù)會很大(dà)，甚至個(gè)别标題支持全屏幕手機，對移動終端用戶體驗的(de)影響可想而(ér)知。

關于(yú)em和(hé / huò)rem的(de)解釋大(dà)家可以(yǐ)自己搜索，這(zhè)個(gè)在(zài)線教程類是(shì)很多的(de)，其實，他(tā)們，像像素一(yī / yì ／yí)樣簡單，當我開始時(shí)隻花了(le／liǎo)幾分鍾就(jiù)熟悉了(le／liǎo)。正如前面所提到(dào)的(de)，你也(yě)可以(yǐ)用它們來(lái)控制框架的(de)大(dà)小，然後根據頁面的(de)響應統一(yī / yì ／yí)縮放，當然這(zhè)就(jiù)需要(yào / yāo)足夠的(de)計算量。還值得一(yī / yì ／yí)提的(de)是(shì)字體圖标也(yě)可以(yǐ)用來(lái)控制，具體可以(yǐ)參考不(bù)同字體圖标的(de)官方文檔。

所以(yǐ)你要(yào / yāo)開始寫媒體調查發現一(yī / yì ／yí)頁有幾十種字體需要(yào / yāo)設置不(bù)同的(de)分辨率，如果把他(tā)們十一(yī / yì ／yí)的(de)調整，你可能需要(yào / yāo)寫100字以(yǐ)上(shàng)的(de)CSS代碼，但是(shì)如果你使用em和(hé / huò)rem，那你的(de)工作量大(dà)大(dà)減少，而(ér)且還确保字體統一(yī / yì ／yí)比例。

雖說(shuō)響應式網站有着萬能的(de)功能，但用起來(lái)也(yě)沒有想像中那麽好，首先，一(yī / yì ／yí)套網站建設模闆要(yào / yāo)幾種設備，雖說(shuō)在(zài)技術上(shàng)是(shì)可以(yǐ)解決了(le／liǎo)，但必要(yào / yāo)要(yào / yāo)造成代碼的(de)多餘性，JS的(de)複雜性等，一(yī / yì ／yí)定程序上(shàng)肯定是(shì)減慢了(le／liǎo)對網頁的(de)打開速度。其次，效果的(de)單一(yī / yì ／yí)性，例如一(yī / yì ／yí)種效果設計者在(zài)開發的(de)時(shí)候，肯定沒有考慮多種設備的(de)兼容性，這(zhè)就(jiù)導緻了(le／liǎo)很多好的(de)效果無法在(zài)響應性網站上(shàng)面使用。在(zài)單一(yī / yì ／yí)設備上(shàng)對應沒有太多優勢可言。

響應式網站遵循原則及優劣對比由東莞網站設計編輯 /maoming/537.html如需轉載請注明出(chū)處

東莞建站費用 東莞網站設計 東莞網站建設 東莞做網站公司 東莞建網站 東莞小程序開發 東莞網站制作 東莞微信小程序商城 揭陽網站建設 企業網站建設 免費網站建設 肇慶網站建設 專業網站建設 河源網站建設 湛江網站建設 動态網站建設 汕頭網站建設 商城網站建設 網站托管 SEO外包 關鍵詞優化