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

Cutting the Cable Cord: Ways to Save
Posted on March 20, 2015  |  Comments Cable is great - lots of channels, DVR, movies! Do I really need all that? I cut the chord to save money and see all the possible options to save.
Echo Dot - 2nd Generation
Posted on February 5, 2015  |  Comments Amazon's Echo Dot is a hands-free, voice-controlled device that uses Alexa to play music, control smart home devices, make calls, send and receive messages, provide information, read the news, set alarms, read audiobooks from Audible, and more.
A Conversation about Conservation
Posted on November 16, 2014  |  Comments It's always good to save money and save the environment at the same time. There are so many ways, lifehacks, and things we can do. Please share.