css3_media_queries

iPhone 6 Plus & iPads CSS Media Queries

While making a responsive websites targeting the specific devices, we need to use the media queries. And, since new iPhone and iPads are in the market I have listed for iPhone 6 Plus & iPads CSS Media Queries that will help us to tackle the responsiveness of website on those devices.

iPad Media Query (iPad Mini)

iPad in portrait & landscape:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)

{ /* Define your style here /*}
iPad mini in landscape:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)

{ /* Define your style here */}
iPad mini in portrait:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)

{ /* Define your style here */}

iPad mini resolution:

Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)

Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

Device-pixel-ratio: 1

 

iPhone 6 Media Query

iPhone 6 in portrait & landscape:

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* Define your style here */ }

iPhone 6 in landscape:

@media only screen and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : landscape) { /* Define your style here */ }
iPhone 6 in portrait:

@media only screen and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : portrait) { /* Define your style here */ }

iPhone 6 Plus Media Query

iPhone 6 Plus in portrait & landscape:

@media only screen and (min-device-width: 414px) and (max-device-width : 736px) { /* Define your style here */ }
iPhone 6 Plus in landscape:

@media only screen and (min-device-width: 414px) and (max-device-width : 736px) and (orientation : landscape) { /* Define your style here */ }

iPhone 6 Plus in Portrait:

@media only screen and (min-device-width: 414px) and (max-device-width : 736px) and (orientation : portrait) { /* Define your style here */ }

 

134H-800x400

Responsive Website Design using CSS3 Queries

Now-a-days screen resolution ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web, as a result the traditional fixed width design doesn’t work any more. So, responsive ness seems to be necessary for every website and in this post I will explain about making responsive website design using CSS3 queries. This post will show you how to create responsive website design using CSS3 Queries with HTML5.

HTML5.js

Internet Explorer 9 and older version doesn’t support the new elements introduced in HTML5 such as <header>, <article>, <footer>, <figure>, etc. So, to make it work on those version we need to include the Javascript file html5.js in the HTML document will enable IE to acknowledge the new elements.

<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

Include Media Queries Javascript

Internet Explorer 8 or older versions doesn’t support CSS3 media queries. You can enable it by adding the css3-mediaqueries.js Javascript file.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Include Media Queries CSS

<link href=”media-queries.css” rel=”stylesheet” type=”text/css”>

Viewport Smaller Than 980px (Fluid Layout)

For viewport narrower than 980px, the following rules will apply:

  • pagewrap = reset width to 95%
  • content = reset width to 60%
  • sidebar = reset width to 30%

Always use percentage (%) value to make the containers fluid.

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

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

Viewport Smaller Than 650px (One-Column Layout)

@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

Viewport Smaller Than 480px

The following CSS will apply if the viewport is narrower than 480px which is the width of the iPhone screen in landscape orientation.

  • html = disable text size adjustment. By default, iPhone enlarges the text size so it reads more comfortably. You can disable the text size adjustment by adding -webkit-text-size-adjust: none;
  • main-nav = reset the font size to 90%
@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}