responsive-myth

responsive design myth

Responsive web design Myth:

1: Fluid Grids (not liquid layout)
	-set html font size for browser consistency
	html{
		font-size:16px;
	}

	- 10 is good divider so

	body{
		font-size: 62.5%; (1em * 10px/ 16px)
	}

	=> target/context =result
	

	* for margin 
	Ex: 300px/960px = 31.25%  (margin width / width of <div class='site'></div>)
	* for padding

	box padding/ box size (not container) = ...%
	#wrapper{
	width:940px;
	}

	#wrapper .content{
		width:200px;
		margin: 10px;
		padding:10px;
	}

	should be converted to...

	#wrapper .content{
		width:200px;
		margin: 01.0638297872340425%; (10px / 940px
		padding: 5%; (10px/200px)
	}

2: media queries:

	@media screen and (min-width: 480px) {
	 
	  .content {
	    float: left;
	  }
	 
	  .social_icons {
	    display: none
	  }
	 
	  // and so on...
	 
	}


    320px
    480px
    600px
    768px
    900px
    1200px

3: scalable font size:

	h1{
		font-size:24px;
	}

	h1 a{
		font-size: 18px;
	}

	=> target/context =result

	h1:	24px/16px(browser) = 1.5em
	h1 a: 18px/24px (context is h1 now) = .75em

Resource:
http://readwrite.com/2013/04/16/10-developer-tips-to-build-a-responsive-website-infographic?goback=.gde_63192_member_243929114
http://css-tricks.com/NetMag/FluidWidthVideo/demo.php
	
4: iPad-Specific CSS - http://css-tricks.com/snippets/css/ipad-specific-css/

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

"orientation" tricks only works for iPad, When determining the orientation for the iPhone and other devices, the use of max-device- width and min-device-width should do the trick.

4: responsive image demo
http://htmlpreview.github.io/?https://gist.github.com/hemantajax/5820668/raw/5ab1ae52ea46b10809413a86222012694dd95d9b/responsive-image.html