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

Let’s go Phishing!
Posted on May 15, 2014  |  Comments Actually, let's not. No fish here. It's an online form of identity theft. According to Wikipedia, phishing is an act of attempting to acquire sensitive information such as usernames, passwords, social security numbers, and credit card details by masquerading as a trustworthy entity in an electronic communication.