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 em
s, largely because em
s afford better zooming. At standard zoom 1em === 16px
, multiply pixels by 1em/16px
to get em
s. 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
PHP/HTML/CSS - If Firefox, If Chrome, If Safari
Ionic 4: Changing Ion-Content Background Does Not Work
Creating 3 Perfectly Equal Columns That Take Up 100% on The Browser Window Width
Resizing Buttons in Twitter-Bootstrap
Left/Right Float Button Inside Div
Half Pixel in Border Width Size It Is Not Showing
Max-Height and Max-Width with CSS Only
Scss/Sass to CSS in Special Folder with PHPstorm 7 File Watcher
How to Set Margins 0 on Print Preview
Use Table Row Coloring for Cells in Bootstrap
Bootstrap 3.0 Affix with List Changes Width
Change Font Sizes with Style Sheets for Rstudio Presentation
How to Change CSS Based on Mobile Device