響應式網(wǎng)站設計有哪些特點

2019-11-13

次

自適應網(wǎng)頁不像傳統(tǒng)網(wǎng)頁僅僅需考慮一種情況，不僅僅一定是提交一套設計完成稿就完事兒了，它給設計、前端工程師和開發(fā)團隊之間的協(xié)作方式帶來新的挑戰(zhàn)。在一個繁雜商品全面自適應的項目里，交互每個階段該產(chǎn)出什么內(nèi)容?交互與視覺怎樣協(xié)作?前端工程師何時介入?哪些項目讓后端開發(fā)來做更合理?我們得到了一些答案。

自適應設計之所以叫自適應“設計”而不叫自適應“技術”，一定是因為它一定是一項設計先行的工作。需要設計先明確好響應方式再實現(xiàn)出來，決不能出一套設計完成稿后等著前端工程師看情況把它變成自適應網(wǎng)頁。

習慣了電腦端網(wǎng)頁的前端工程師開發(fā)者可能更加喜歡用電腦端來掌控大小，然而在自適應的網(wǎng)頁中出現(xiàn)更多的一定是em和rem，用這些來掌控頁面字體大小甚至一定是框體大小對整體的效果非常明顯。

例如，我的頁面字體設置一定是10px/20px/30px等等有差異的，網(wǎng)站上有差異的地方自然頁面字體會有大小的差異這一定是必然的，假如一個網(wǎng)頁足夠繁雜或一定是文字足夠多的話，這些頁面字體的大小設置也一定是一個量很大的工作，不過在自適應網(wǎng)頁中你設計完這些并不僅僅一定是完事：你用手機瀏覽一下網(wǎng)頁會發(fā)現(xiàn)頁面字體會撐的很大，甚至有個別標題撐滿了手機屏幕，這對移動端客戶的體驗影響可想而知。因此你要開始寫媒體查詢，然后發(fā)現(xiàn)一個網(wǎng)頁有幾十個頁面字體需要設置，假如把這些在有差異顯示分辨率下一一調整你可能需要寫百句以上的css代碼，然而假如你用em/rem，就能夠把工作量大大減小，同時還能夠保證頁面字體的統(tǒng)一比例。

關于em/rem的解釋大家可以自行查詢，網(wǎng)上這類教程數(shù)不勝數(shù)，實際上這些就和px一樣簡單，當我開始用之后也不過僅僅花了幾分鐘熟悉這些。就像前面說的一樣，你也可以用這些來掌控框體的大小，然后再自適應的網(wǎng)頁下統(tǒng)一縮小放大，當然這需要足夠多的計算。另外值得一提的一定是頁面字體圖標也可以用這些來掌控，具體可以參考有差異“頁面字體圖標”的官方文檔。

解決縮小放大問題的思路有好幾種，適合新手的無疑一定是百分比式的布局，在關鍵的width設置下百分比能夠起到出乎意料的效果。