今天偶然看到一本書《Pro SharePoint 2013 Branding and Responsive Web Development》,看到SharePoint 2013基于HTML5的響應式的布局,就簡單的嘗試了一下,感覺還不錯。當頁面在不同的浏覽器可視區域上浏覽的時候,會通過不一樣的css檔案來進行展示,使使用者在浏覽頁面中能盡可能的達到最佳體驗。
下面簡單看看效果,在1380px浏覽器可視區域中浏覽,下面的css生效:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuE2NxMGN3EmY5cDZ5Y2YwQjMyEzYiNjZ2MWNjZTYmFTYfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
(浏覽器的可視區域為1380)
在920px浏覽器可視區域中浏覽,下面的css生效:
(浏覽器的可視區域為920px)
在600px浏覽器可視區域中浏覽,下面的css生效:
(浏覽器的可視區域為600px)
在290px浏覽器可視區域中浏覽,下面的css生效:
(浏覽器的可視區域為290px)
當然,真正要做好一個響應式布局,肯定不是這樣簡單的,需要複雜的設計和Css編寫,代碼量很大,這裡隻是一個最簡單的例子,讓大家了解sharepoint中的這一html5特性而已。我這裡隻是寫了Css檔案和Html代碼,加入到頁面中,沒有做更複雜的布局,隻是為了舉例,好了,不多說了,代碼附後!
下面是樣式檔案:
下面是HTML檔案:
總 結
當然,這樣的響應式布局優點就是不同分辨率裝置相容性好,缺點是代碼量偏大,隐藏元素影響加載速度。不過凡事都有利弊吧,不過也為将來多終端網站提供了一個不錯的思路,也希望能對需要的人以幫助。