How much media queries would you suggest to use?
I've made 4 designs:
960 for landscape-mode (ipad and more like Desktop)
768 for portrait-mode (ipad)
340 for portrait-mode (iphone)
and all above 960
Now my questions:
1) First I even don't know why I used 960 and not 1024. I read something a while ago, because of the scrollbar you've to reduce the width to 960. What about this regarding Tablets and Smartphones?
2) I've choosed these widths because I thought, if someone uses landscape mode, it would switch to the "ipad-media-query" and back to the "iphone-media-query". But that's just my theory. I'm new at media queries. That's why I ask. Appreciate any help or even your suggested CSS-code-examples to have the best amount of media queries covered for a website!?
3) I just want to cover most tablets, smartphones, desktops, etc. to be affected by the best media-query size. I would really appreciate your "best solutions"!
How long is a piece of string?
It's really up to you and your design as to how many media queries would be suitable to use and how you implement them.
As a guide I'd recommend looking at how Twitter Bootstrap implement their media queries. They've done a lot of research into it to arrive at their numbers so that would be a good starting point.
http://twitter.github.com/bootstrap/scaffolding.html#responsive
It is a bad idea to try to indentify breakpoints. The main reason for a breakpoint in an responsive website is to keep the experience optimal. You don't want to bring in a new media query for every new device or resolution.
Use as many media Queries as you need to. You may shy away from using too many because you don't want a gigantic CSS file. But that wont significantly slow down the site. If you organize your media Queries well and use min and max widths for each query it will be very easy to keep track of your code.
You can use one media Query for every orientation of every device if you want. Of course ideally you want to use zero media queries and just make a perfect site that morphs perfectly. But that's not going to happen unless your site is super simple.
I use 9 media queries.
If you can widen the resolution parameters and get rid of a few media queries, all the better.
Use media queries for:
240 x 320 (mobile),
320 x 480 (mobile),
480 x 640 (small tablet),
768 x 1024 (tablet - portrait),
1024 x 768 (tablet - landscape)
Considering width below 320px is a very good practice but for those who focus a lot about each and every visitor.
i would use a dynamic layout which does not need media queries.
just use the media queries to hide/move elements.
you can use any number of them. just put some javascript in your page which displays your current browser width and then resize your browser to test when to hide elements. works for me
The latest design world wants responsive design.
See this examples & use all media queries you want: http://nmsdvid.com/snippets/
Related
I am currently studying responsive concept and media queries, and I havent be able to understand the purpose of it, since we can use "%" for size properties in our CSS files. In fact for example in my CSS file if I add the "width" style property like this : "{width: 70%;}", my Web page will fit into any screen sizes because it will take 70% of it, without regarding the screen ? Or maybe she will be displayed with too small characters, that would be the explanation of why we use responsive methods ? It seems like maybe I didnt really get the purpose of it. Thank you for all your help.
Have you used a news website? In broad devices like laptops, there are multiple columns across the screens. While you use the same website on mobile phone, a single column takes all the available space. This is where responsive design and media queries come in. You can observe the same effect almost everywhere on the web.
Suppose if the news website had set the width of each column as 25%, the it would look good on a laptop, but the width of each column would be then very less when you view it in mobile phone (as 25% of mobile screen width would be very low) and this would make the text unreadable. This is why % units don't work everywhere and we need responsive design and media queries.
This is not the only use of media queries. You can even specify how your webpage will look when printed with the help of media queries. Modern css frameworks like Bootstrap are completely based on media queries
Still if you have any doubts related to the use of responsive techniques like media queries, you can just google "uses of media query" or "uses of responsive design" and you will get tons of articles and posts on their usability.
The use of % and other units can be done to a small extent but they don't give us the freedom responsive design gives us. Responsive design is more than using such units.
I have a website I want to fit on a mobile device. I do know that all mobile devices have different screen sizes. what is the best way to go about this?
I also know that you can put #media or at #media screen
is there a difference between those 2 as well?
The best way to do this is by having the divs width measured by percent . like have to divs of 50% each, which will be displayed the same way on any screen . Using percent is the best way. Another way thats much simpler is using bootstrap, which has existing css classes that will help you create responsive divs, images, ect. They have all the right classes that will work for mobile and pc. hope this helps
There are many different practices for building mobile friendly websites. The most notable being Responsive Web Design.
Another method would be to create device specific templates that would need to be coded individually for each devices screen size.
Clearly, the latter of the two is the most labor intensive and can be avoided and used only when working with drastic screen size differences. For instance, you may want to have separate templates for different types of devices instead of screen sizes (phones, tablets, computers).
Doing device specific (not screen size specific) styles allows for better use of space on bigger resolution devices.
I am a beginner and have been working on my first responsive site with media queries.
A site I was reading told me some standard ones were
768-1024 for tablets
320-480 for smart phones.
I used these to begin, However, when I open it with my note 3 I get the tablet version and the menu is too small for it. This same result happens with an iphone 4.
Even when I changed the smart phone range to 320-767, both phones still are using the "tablet" layout. The note 3 has a width of 720 correct? so with this it should force it into the smart phone query right? Am I misunderstanding this? How can it tell the difference between something small but with a high resolution like the note 3 to a tablet so that I can have larger elements on the note3?
If someone could explain to me what is going wrong here I would gladly appreciate it.
The note 3 has a 1920x1080 resolution, not a width of 720 pixels.
Instead of selecting pre-defined values for targetting specific devices, it is recommended to use values suited to your content specifically. That way, all devices can expect an appropriate layout, usually with more simple media-query rules too. There are just too many devices out there today to pick specific values.
Yeah #rwzy 1920x1080 I should say. He must design first in mobile then going larger on desktop and tablet, He must choose Breakpoints based on the content not on defines screen sizes.
If you are creating your website based on the screen sizes only well use media queries also if you based it on resolutions also media queries best suite your problems. try http://www.hongkiat.com/blog/css-retina-display/
I have a media query -->#media all AND (max-width: 1024)..which works well on a Samsung tablet, but I need this to only apply on th tablet and not on the pc. If the device is a pc, it should only #media screen and (max-width: 768px).. how do I go about it?
you can not check for the device (pc, tablet, handheld) with media queries, only for the device width (more, i know, but op ask for device-width).
Maybe this article will help you understand more of it?
Media query should never be device specific - you simply say 'for an output of this size do this, but for an output of a different size, do that'. Whether it's a phone, PC, tablet, kiosk, watch or anything else should be irrelevant. For this reason, media query doesn't enable you to query hardware as such.
You may want different behaviour (rather than style) based on device capability, e.g.. is this a 'touch' device? But that should be managed in JS rather than CSS.
What is the actual goal of your query? Does it matter that the CSS is applied to a PC as well as a tablet?
The short answer: you don't.
The longer answer: you're going about it the wrong way.
It's easy to fall into the trap of using screen widths to target specific devices, but that's an Alice in Wonderland rabbit hole. Why? Because the widths of mobile devices overlap with the widths of desktops.
For example, here are a list of screen widths, can you guess which ones are desktop?
1024
1366
1200
1080
Guess what? I bet you're wrong about your guesses. 1024 and up seems like a "desktop" resolution, but iPhone 5 Retina is 1136x640, and the 3rd generation iPad is 2048x1536. To make things even more complicated, many people on desktops don't keep their browsers maximized, so device width does not equate to browser width. And what happens on the Kindle, which has a higher resolution, but also increases the text size?
And more devices are coming to the market on a regular basis.
So, your best bet? Abandon the idea of targeting specific devices or device classes altogether. If you absolutely have to, use JavaScript to look for touch screens (as that's the most likely reason you need to adjust the interface specifically for a class of devices).
You can still use media queries to target widths (or better yet, in my experience, use proportional media queries), but don't expect it to necessarily work on a given device.
I'm designing a website using media queries and have everything looking good on desktop and my iPad...but my phone is a different story. The pixel dimensions are 1024x768 because it is a newer smart phone, so it is trying to display it like my tablet. How can I use a media query to specify that my phone at 1024x768 should display differently than my iPad? Thanks for any help.
Here's what I've been working with to start:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
Initial thoughts
Some additional information on the exact layout problem on your phone would be helpful. Also, do make sure you are using the proper <meta> tag (as #Lokase suggested). A good run down can be found here.
Two possible solutions
Usemin-height and max-height in combination with the
width media queries you are already using to attempt to target
your phone.
If that is not an option, you can use javascript to target your
phone by attempting to detect the user agent, but this can be hit or
miss.
A word of Warning
With all that said trying to design for specific viewports will lead to endless frustration. A more time intensive you may need to step back and rethink your layout, and how you are using media queries. This can be a pain to implement, but you will thank yourself in the long run. Just consider the number of high resolution android phones in the market now, and how many are going to be shipping soon.