the Blog

Tips & Tricks

Responsive Development by CSS and/or jQuery

Posted on November 8, 2012 by Michael Rosario  |  Comments

If you decided to fore-go the use of a responsive framework/boilerplate. Here is a quick way to get you started.  This approach might be more work, but it may be fruitful in terms of broadening your skills and understanding of responsive design/development - not to mention a more light-weight code in that you only use what you need.

First, using CSS, we can now add the following statements that specifically target browser size or display area:

/* CSS for all browser goes here */
@media only screen and (max-width900px{
/* CSS for browser screen with 900px and below goes here */

@media only screen and (max-width600px{
/* CSS for browser screen with 600px and below goes here */

So you can create multiple definitions of style… amazing!  There’s also specific CSS code to target the size of the device screen:

@media only screen and (max-device-width480px
/* CSS goes here */

Here are other examples for iPad, iPhone, Android and detection of landscape/portrait modes:

@media only screen and (device-width768px) and (orientationlandscape{
/* CSS rules for iPad in landscape orientation */

@media only screen and (min-device-width320px) and (max-device-width480px{
/* Android, iPhone CSS rules here */

Using jQuery (Javascript) is another way.  jQuery can detect the size of the window or specific elements in your screen.  In my case, I have the following DIV element:

#SiteWrapper { width: 100%; max-width: 960px; margin: 0 auto; } 

This encloses all content of my HTML and it resizes only when the browser screen is less than 960px.

For jQuery, we need to take into consideration of two things: (1) Page load and (2) User changing the size of the browser:

/* JQuery code here when page loads */

/* Detect when user or the browser size changes */

/* When #SiteWrapper DIV is less than 960px */

/* When #SiteWrapper DIV is less than 600px */

So, now you know how to detect the size of the browser in jQuery. Now what?  I use the following code:

/* This replaces the class */

/* This add the class (for multiple classes) */

/* Changing the CSS  */

$("#SiteWrapper A").animate({'font-size':'20px'},1000);
/* Animating the elements via CSS  */ 

I tend to use both jQuery and CSS when creating responsive sites.  I hope that this post can get you started. I believe that this is the future of web development and It looks like I’ve got a lot of work to update all my sites to responsive UI.

comments powered by Disqus

Other Recent Blog

What do I need to be a Web Developer?
Posted on November 8, 2017  |  Comments I was asked recently asked by a college student what he needs to be a "Web Developer." If I were to sum it into one blog entry, it would be a mix of the tools I use, best-practices and the coding languages that I know. It's never to late to learn how to code and learn new tools. Once you have an idea on the basics - it's never too far to learn another. Every single thing online has documentation, youtube videos, and wikis readily available. There are a lot of tools out there and a lot of developers willing to share their two cents on forums and social media.