When writing media queries for smaller devices coming from a computer-first approach rather a mobile first approach such as for cell phones and ipads, what are good ranges of width for smartphone size and Ipad size?
#media screen and (min-width: _____) and (max-width: _____)
{
code
}
Media queries change all the time based on new devices and screens. It really depends on what you're trying to target.
But here's a great resource that can make like a little simpler
www.css-tricks.com/snippets/css/media-queries-for-standard-devices
Cheers and happy coding!
computers/laptops usually begin at 1200px, so when designing a website try to have your main container have a max width of 1199px so it will work on all computers and laptops.
ipad horizontal is 1024px,
ipad vertical is 768px.
cellphones will max out at 500px,
iphone 6+ is 414px,
iphone 6 is 375px,
iphone 5 and below is 320px.
androids range from 320px-500px.
Related
I am currently designing the home page of my website and I want to make a responsive website with 5 hexagon-shaped images, 3 on top, 2 on the bottom. So I created a container with a width of 90% and a height of 65vh it responds nicely to different screen sizes. I then made my 5 hexagons and set up the dimensions for my images, it looks fine on the mobile devices in chrome developer tools but you can see my hexagons appear bigger on ipad sized devices and becomes too big of an issue to ignore with laptops and bigger. Thats not the issue as I can change that by using #media queries.
I then decided to check all the mobile devices dimensions before I do #media and it works great for devices whose height is greater than or equel to the device width but my bottom 2 hexagons leave the screen if my device width is greater than the height. I have tried different approaches and I'm encountering the same issue. Its like they adjust to the change in screen width but not height.
I found out the problem was I needed to design the website for landscape mode because obviously asmaller height and larger width is landscape, Ill throw up the media query in case anyone stumbles on it:
#media (max-width: 1024px) and (orientation: landscape)
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
When i read about responsive design, people always seam to use this statement:
#media screen and(max-width: )
But mobile phones today seem to have really great resolution (often more than pc), whats the best way to detect small devices?
Thx ;=)
The screen resolution does not matter. The value used in media queries is the device width. For example:
My phone has a screen with a resolution of 1280x720 pixels. When held upright (in portrait mode) the width is 720px, but since it is an HD screen, it has a 200% ratio, and the resulting device width is 360px. This is the value used in media queries:
/* Even though my phone has a screen width of 720px… */
#media screen and (max-width: 360px) {
/*
* This code will apply
*/
}
#media screen and (min-width: 361px) {
/*
* This code will not apply
*/
}
The general rule is that phones in portrait mode have a device width less or equal to 400px, regardless of how many actual pixels their screen contains.
You can't directly query physical size.
You can, however, perform a media-type query for DPI along with Height and Width.
Example
#media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
// Iphone 5s
}
This should be a good starting point: List of displays by pixel density
Physical pixels and CSS pixels are not the the same on retina/HD mobile displays.
Research the viewport meta tag for information on device-width. i.e. <meta name="viewport" content="width=device-width"> is the CSS pixel width scaled at 100%.
See Viewport Device-Widths for a list of common mobile screen sizes.
When you are doing responsive design, you don't actually "detect" the screen size, rather you "target" various size using CSS Media Queries.
If you are using a library like Modernizer for example, that's when you are actually doing detection for various properties.
I'm having different CSS files for different layout (Phone & Tablet). Since I have added styling in tablet view based on the view I get on my Samsung Note 8 with resolution 1200x800.
But when I run this application on Samsung Galaxy tab750 with resolution 1920x1080, I get smaller layout with smaller fonts since I have adjusted the fonts and layout based on Note 8.
So I get the suggestion to add the another CSS file for handling this. Next, when our QA tried running the application on iPad (Retina Display 2048x1536), again the third CSS is even small in it.
In 2012, there was a single tablet with a 2,560x1,600 resolution. In 2013, there were at least six. I suspect we'll see even more in 2014 (http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw).
With respect of this post Responsive Web Design and high resolution displays (iPhone 4/5),
We would be using media queries for required resolutions,
/* Large desktop */
#media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
font-size: 12px;
}
So my concern is can we handle this scenario, without going on adding more and more CSS and media queries, if so please suggests.
There are a number of media-query based ways of detecting high-density/retina devices.
I personally tend to use this, which seems to capture the vast majority of devices:
#media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {}
Totally personal preference though!
Do bear in mind that - to the most part - 'high density' screens (rather than just high-resolution) report themselves as their non-HD resolution for the purpose of media queries.
For example: the Retina Apple iPads have an actual screen-resolution of 2,048 by 1,536, but still reports as 1,024 by 768px. Thus, the same screen-width/height media queries will capture the iPad 4 (retina) as the iPad 2 and - apart from being a little more blurry in the case of the older iPad - will look the same.
You can combine the media query I've included above with width/height to get a much more granular target on specifically-HD devices if you wish.
One very important exception to this is high-density display devices running Windows 8 Mobile which has a known bug with correctly reporting the viewport.
I'm building a Wordpress theme and everything is peachy but I have problem with the layout on IE8 on a screen resolution smaller than 1200px
Basically my layout has 1200px grid width but I figured that there will be a problem with 1024px screen resolution (20% of the population bla bla) so I created media queries when the screen size is smaller than 1199px the grid to change its width to 960px and so on for tablets, phones etc.... and problem solved! EXCEPT!!! for IE8 which does not support media queries and the theme does not resize properly on IE 8 with screen resolution of 1024x768px and ofcourse lower....
So my question is how can I make the design change the grid width to 960px ONLY on IE 8 and lower and screen size bellow 1200px?