Intro to Responsive Design and Jquery

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Viewport

Viewport—When using Media Queries you need to include a viewport otherwise you will not get the anticipated result.

Insert the following in head section:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Media Queries

Media Queries can be used to ensure that your site will work correctly regardless of the user’s screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, iPad, cell phone etc.

See Media Queries sample here.

Sample Breakpoint

@media screen and (max-width:980px)

@media screen and (max-width:768px)

@media screen and (max-width:480px)

DEMO

Learn more about Responsive Web Design (reading assignment)


  1. Lecture on Java & Jquery
  2. http://responsiveslides.com/
  3. http://stackoverflow.com/

Reading Assignment

  • Reading Assignment: Chapter 16, 17, 18, 19; CSS Quiz next class
  • W3S CSS outline —CSS float

Leave a Reply

Your email address will not be published. Required fields are marked *