Clever Geek Handbook

Website layout that resizes with different widths?

Does anyone know how to accomplish a different layout based on browser width like these two sites?

http://sasquatchfestival.com/

http://css-tricks.com/

I tried google, looked at Stackoverflow questions and looked at their code, but I think I am missing something. It actually rearranges and resizes some of the elements based on the width of the window, but how? Javascript?

Sorry if my search skills are just failing, but I'm not really sure what to look for, the "similar questions" here don't seem to be related, and even CSS-Tricks has no easy-to-find information.

+3


source to share


4 answers


You don't need to use JS to determine the browser width. You can just use CSS media queries to change the layout.

For example:

@media screen and (max-width: 1280px) {
    ... selector(s) here ...
}


Applies CSS only to screens up to 1280 pixels wide.

See also:

+5


source


You can use CSS3 media queries to deliver different styles based on screen width. See here for more information: http://www.css3.info/preview/media-queries/



If you look at the CSS source of sasquatchfestival.com, for example, you can see what they do: http://sasquatchfestival.com/css/screen.css?v=1328828795 . Search for "@media-only screen" and you will see that they supply different CSS for widths below 768px, between 768-1024px and above 1024px.

+1


source


You can reinvent the wheel, or you can simply build / redesign your website using one of the many flexible frameworks that are available. I've used both Skeleton and Bootstrap by Twitter. Their framework can be found in ... Skeleton ... [http://www.getskeleton.com/ Their [1] Bootstrap ... [http://twitter.github.com/bootstrap/] [2]

I have built sites using each ... Skeleton ... [http://72t.net] [3] Bootstrap ... [http://ReactiveWebDesign.net] [4]

I'm still trying to decide which I prefer, but right now the boot strap seems to offer more options.

+1


source


Maybe a little jMasonry , but this is also a bit like what Twitter Bootstrap provides in rails, it might be worth pouring their static version of the CSS for the answers.

0


source






More articles:


All Articles