Responsive layouts for the HTML5 features of SharePoint 2013

Today, I stumbled across a book, Pro SharePoint Branding and responsive Web development, and saw the layout of the HTML5-based response in SharePoint 2013, and it was a simple attempt and it felt good. When a page is viewed on a different browser's viewable area, it is displayed in a non-identical CSS file so that the user can achieve the best possible experience in the browsing page.

Below is a simple look at the effect, in the 1380px browser viewable area, the following CSS takes effect:

(The viewable area of the browser is 1380)

Browse in the viewable area of the 920px browser, the following CSS takes effect:

(The viewable area of the browser is 920px)

Browse in the viewable area of the 600px browser, the following CSS takes effect:

(The viewable area of the browser is 600px)

Browse in the viewable area of the 290px browser, the following CSS takes effect:

(The viewable area of the browser is 290px)

Of course, to really do a responsive layout, it certainly is not so simple, need complex design and CSS writing, the code is very large, here is just one of the simplest examples, let everyone understand this HTML5 feature in SharePoint. I just wrote a CSS file and HTML code, added to the page, did not do a more complex layout, just for example, well, not much to say, the code is attached!

Here is the style file:

1<style type="Text/css">2 Content Div {3 border:1px black solid;4     }5 6@media screen and (max-width:320px) {7 #below320 {8background-color:red;9         }Ten     } One  A@media screen and (min-width:320px) and (max-width:800px) { - #between320to800 { -background-color:red; the         } -     } -  -@media screen and (min-width:800px) and (max-width:1280px) { + #between800to1280 { -background-color:red; +         } A     } at  -@media screen and (min-width:1280px) { - #pass1280 { -background-color:red; -         } -     } in</style>

Here is the HTML file:

1<div id="content">2<div id="below320"> Less than 320</div>3<br/>4<div id="between320to800"> Greater than 320, less than 800</div>5<br/>6<div id="between800to1280"> Greater than 800, less than 1280</div>7<br/>8<div id="pass1280"> Over 1280</div>9<div>&# the;</div>Ten</div>

Summary

Of course, the advantages of such a responsive layout is that different resolution device compatibility is good, the drawback is that the code is too large, hidden elements affect the loading speed. But there are pros and cons of everything, but also for the future multi-terminal Web site to provide a good idea, but also hope to the people who need to help.