Genesis Themes

  • Home
  • Genesis Tutorials
  • WP Tutorial
  • Twenty Fifteen Theme
  • Social Media
  • WP Plugins

Boilerplate CSS Media Queries for Responsive Website

Boilerplate CSS Media Queries

Based on the device screen,your website or web page need to get change for better user experience.These Boilerplate CSS media queries helps to fit web pages in all browsers and smart phones. Responsive website is a advanced concept,where content,menu,ads and image sizes will get change based on different devices screens.

Designing responsive website ?, now you can target the mobile and tablet devices such as Tablets,Smart phooes,Ipad, IPhone and other mobile phones by adding the boilerplate CSS media queries.

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Related Posts

  • Add Click to Call Phone Number Link With HTML5
  • Highlight Current Menu Item Using jQuery
  • Custom CSS Media Queries for IOS Devices
  • JavaScript to Load Disqus on Scroll
  • Load Disqus Comments On Click With AJAX
  • How to Style External Links With CSS
  • How to Find CodeCanyon ThemeForest Purchase Code
  • How to Add HTML 5 Support to Thesis Theme
  • No Self Pings : 2 ways to Remove WordPress Self Pingbacks

Bluehost and Siteground Coupons for January 2016.

Best Premium WordPress Themes from TemplateMonster
download wordpress themes from MonsterOne

Categories

  • Blog
  • Blogger
  • Genesis Tutorials
  • Social Media
  • Top Websites
  • Twenty Fifteen WordPress Theme
  • WordPress Plugins
  • WordPress Tutorial