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-width: 900px) {
/* CSS for browser screen with 900px and below goes here */
}

@media only screen and (max-width: 600px) {
/* 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-width: 480px) { 
/* CSS goes here */
} 

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

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* CSS rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* 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:

if($("#SiteWrapper").width()<960){
/* JQuery code here when page loads */
}

$(window).resize(function(){
/* Detect when user or the browser size changes */

   if($("#SiteWrapper").width()<960){
      /* When #SiteWrapper DIV is less than 960px */
   }

   if($("#SiteWrapper").width()<600){
      /* 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:

$("#SiteWrapper").attr("class","iPad");
/* This replaces the class */

$("#SiteWrapper").addClass("iPad");
/* This add the class (for multiple classes) */

$("#SiteWrapper").css({'font-size':'10px','font-weight':'bold'});
/* 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.