Responsive CSS - Target 1024 X 768 Screen Size Only

Responsive CSS - Target 1024 x 768 Screen Size Only

Use for desktop:

@media (min-width:769px) and (max-width:1024px){
// your code
}

Use for tablet:

@media (min-device-width:769px) and (max-device-width:1024px){
// your code
}

How to target a specific screen size using @media media query?

I finally got this one, by reading articles from blogs and stack overflow questions that had been answered, and articles posted from your comments on this question.

Based from common Breakpoints and View-ports for Mobile devices, i.e. 1200px wide viewport for large destkops, I have to insert my own style in a media query.

I.E., @media (min-width) {mystyle here}

@media (min-width: 1200px) {
.myContainer {
width: 960px;
margin: 0 auto;

}
.myleftBlock-should-collapse {
float: none;
width: 100%;
}

}

Since I am using the Twitter Bootstrap Responsive.css file, I need to customize the media query for certain viewport, so that It will fit to my design needs.

Well since I am designing a fixed-width of 960px, I will customize and re-calculate the widths for my .container and span classes. I will convert pixel to percent base from my base width of 960px.

So whatever block or element that I would want to collapse, hide or show in certain viewports, shall be styled accordingly inside the media query.

And... New thing I learned about responsive design. Screen size is different from Viewport.

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

CSS media queries for screen sizes

Unless you have more style sheets than that, you've messed up your break points:

#1 (max-width: 700px)
#2 (min-width: 701px) and (max-width: 900px)
#3 (max-width: 901px)

The 3rd media query is probably meant to be min-width: 901px. Right now, it overlaps #1 and #2, and only controls the page layout by itself when the screen is exactly 901px wide.

Edit for updated question:

(max-width: 640px)
(max-width: 800px)
(max-width: 1024px)
(max-width: 1280px)

Media queries aren't like catch or if/else statements. If any of the conditions match, then it will apply all of the styles from each media query it matched. If you only specify a min-width for all of your media queries, it's possible that some or all of the media queries are matched. In your case, a device that's 640px wide matches all 4 of your media queries, so all for style sheets are loaded. What you are most likely looking for is this:

(max-width: 640px)
(min-width: 641px) and (max-width: 800px)
(min-width: 801px) and (max-width: 1024px)
(min-width: 1025px)

Now there's no overlap. The styles will only apply if the device's width falls between the widths specified.

Media query that targets 1024px but displays differently for desktop and tablet? Possible?

You cannot do what you want in pure media query CSS. Basically, you can target tablet beyond just the screen size:

Touch Support

CSS4 gives media queries a new touch option. Since this isn't supported very widely yet you can use Modernizr. It will add a class to the root html of "touch" or "no-touch". You can then use that to target touch devices. Example:

html.touch .someToolbar {display: none;}  //hides toolbar on touch devices

User Agent

Using javascript detect the user agent and load the appropriate css or just make the style changes if they're small

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { /* do tablet/mobile specific things */}

Resolution

If you want to target a specific screen size. For example, I want anyone running 1024 with 11inch or smaller screen

@media 
only screen and (oriantation: landscape) and (device-width: 1024px) and ( min-resolution: 116dpi),
only screen and (oriantation: portrait) and (device-height: 1024px) and ( min-resolution: 116dpi), {
//targets specifically 1024 width with screen size 10 inch or smaller
}

NOTE - I have not used the resolution method, testing needed.

Why does media query targeting 1024x768 also target iPads with retina display?

Although the Retina display has a resolution of 2048x1536, its device-pixel ratio of 2 means that the resolution as far as CSS is concerned is still 1024x768 (this is known as "CSS pixels"). The pixels are simply doubled when rendering pages onto the display, independently of how pixels are calculated by the browser for the purposes of CSS.

This is why the device-pixel-ratio/resolution media feature exists to distinguish high-resolution variants of specific devices.

What is the media query for large desktops?

The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.


Example: for class "container"

@media screen and (min-width: 1400px) {
.container {
width: 1370px;
}
}
@media screen and (min-width: 1600px) {
.container {
width: 1570px;
}
}
@media screen and (min-width: 1900px) {
.container {
width: 1870px;
}
}


Related Topics



Leave a reply



Submit