Tips for Omega drupal responsive themes


[A] Omega default responsive Resolution
1. My narrow media query: all and (min-width: 740px) and (max-width: 980px)
2. My normal media query: all and (min-width: 980px) and (max-width: 1220px)
3. My wide media query: all and (min-width: 1220px)
rakesh_saini_responsive
[B] Omega use Stylesheets
1. Mobile = global.css
2. Tablet = global.css + default.css + narrow.css
3. Normal = global.css + default.css + narrow.css + normal.css
4. Wide = global.css + default.css + narrow.css + normal.css + wide.css

[C] omega start ans end resolution

  • small (mobile) – 0px to 740px wide
  • narrow (tablet) – 741px to 979px wide
  • normal (laptop) – 980px to 1219px wide
  • wide (monitor) – 1220px and wider
Advertisements

Screen Resolution and Responsive Design


Estimated Display in Pixels
Device Width Portrait Width Landscape
Sony Ericsson Xperia Ray 320 480
iPhone 320 480
iPhone 4S 320 568
Blackberry Bold 9900 480 640
T-Mobile MyTouch 4G Slide 480 800
Samsung Galaxy S II 480 800
HTC Titan II 480 800
Sprint HTC EVO 4G 480 800
Nokia Lumia 900 480 800
Sony Ericcson Xperia Arc S 480 854
HTC Amaze 4G 540 960
Motorola Droid 4 540 960
Motorola Droid Razr Maxx 540 960
HTC One S 540 960
Kindle Fire HD 8.9″ 600 960
Samsung Focus 2 640 800
iPad Mini 768 1024
iPad 768 1024

What is a responsive theme?


responsive web design
responsive-web-design img by Rakesh bagri
A responsive theme (as the one used for this website), is an approach to web development that allows a website to break itself down smoothly across multiple monitor sizes, screen resolutions,  be it a computer, tablet or MOBILE  device. It allows the developer to create a site that is optimized for each platform, both in navigation, readability and load time. As you can see when resizing the window (if you are viewing this site on a computer), the layout of the page shifts depending on the size of the screen; with different layouts for content depending on viewing area. Themes (or layouts) such as this, allow for a single site and single look to the site, to be viewed on various devices without the need for additional themes or resizing by the user. learn responsive development  bootstrap

Responsive resolution tricks


Rakesh_sainibest resolution for responsive design and ui iphone web template

/* Standard 1024 or larger (browsers) */
@media only screen and (min-width:1024px) {

}
/* standard 1024 or smaller  (devices and browser) */
@media only screen and (max-width:1024px) {

}

/* standard pc size 754 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:1023px) {

}

/* Mobile Landscape Size to Tablet Portrait 520px (devices and browsers) */
@media only screen and (min-width:540px) and (max-width:767px) {

}

/* Mobile Landscape Size to Tablet Portrait 440px (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width:767px) {

}
/* Mobile Portrait Size to Mobile Landscape Size 300px (devices and browsers) */
@media only screen and (max-width:479px) {

}

WordPress.com.

Up ↑