I'm trying to develope a website with the responsive design and I know that I have to use media queries, I used them and they work fine on my desktop (When I resize the window the look change).
So I was wondering if there are some 'standard values' to use them with smartphones/tablet/desktop.
I've looked at other questions but are too old.
A bit of searching on CSS a you may found this :
http://getbootstrap.com/css/#grid-media-queries
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Basically (if you read the comment lines), for classic CSS (meaning no less/sass), you would replace #screen-sm-min by 768px for instance. Or whatever fits you.
Basics of RWD you can refer
Google Web Fundamentals http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Froont's basic principles http://blog.froont.com/9-basic-principles-of-responsive-web-design/
Related
Total NOOB at web development and trying to teach myself here and it’s quite daunting to say the least, but I’m having fun nonetheless.
Anyway, I know that media queries affect the way mobile devices render the page on various screen sizes, but I want to know if there’s just one media query that can affect ALL mobile devices regardless of screen size?
I just want to make sure it won’t affect the Desktop.
For instance I want to tweak a navigation menu on all mobile devices, but I don’t want to meticulously change each media query that pertains to a screen size in my style.css.
I just want to create one media query to make this tweak that will affect all mobile screen sizes.
Hope that makes sense.
As always, you all are awesome!
Thanks for your help!
happy that you are choose to learn Web-Development.
But your way sounds more complicated than it is. First, Desktop and Mobile can be the same at all. It only counts down to Media Queries. On a Desktop, your Browser can be have the same width as a mobile device. So you need to clarify in your Project at which point you want to show the User the "Mobile" Styles and when to display the "Desktop" Styles. In most Projects I worked or saw, the default Media Queries are something like that:
#media (min-width: 320px) {}
#media (min-width: 768px) {}
#media (min-width: 1024px) {}
#media (min-width: 1220px) {}
#media (min-width: 1440px) {}
So you see on every media query you can attach some new styles for the selected query size. To make its easier for writing styles and don't override all these things on every new width, you can make something like that:
#media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
#media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
#media (min-width: 768px) {} // general desktop && tablet styles if needed
#media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
#media (min-width: 1025px) // start with desktop styling
All these styles between the media queries are only attached to the sizes.
So just choose your needed width, for example:
All mobile styles attached only between 320px and 1024px
#media (min-width: 320px) and (max-width: 1024px) {
.nav{ background: red; }
}
All desktop styles attached only after 1025px
#media (min-width: 1025px) {
.nav{ background: green; }
}
All these media queries just show the different widths, you also can do this by heights, but its way more difficult because of the device/display sizes.
If you really want to check the User Agent and divide between the browser, agents, devices or something like that you will need JavaScript and thats way more complex than just display the styles for different widths.
I hope this helps you! If you have any questions about Media Queries and how to write them correctly, MDN is a good resource: MDN - Media Queries
For anyone looking for a generic and easy media query for mobile, I would suggest the following:
#media screen and (max-width: 767px) {}
Similar to the suggestion by #m4n0, but this is the correct query including the "and". This is a good start, and then you can continue to define more breakpoints as you need more responsiveness along the way.
It depends on is your mobile layout is designed. As even in the mobile view you need to think about Portrait and landscape mode.
For some common styling, I normally use
#media screen (max-width: 767px) { }
You can also use orientation to set media queries like below
#media screen and (max-device-width: 480px) and (orientation: portrait) {
Your classes here
}
#media screen and (max-device-width: 640px) and (orientation: landscape) {
Your classes here
}
Great question, Android and Apple devices in my search normally fall within 450px in portrait and 800px on landscape, I would suggest you create a media query for both these sizes and you would have covered a high number of mobile devices in both portrait mode and landscape mode. If you are targeting a specific device I would suggest looking up those specific screen viewport sizes and adjusting or adding more media queries to cover those cases. Hope this helps! Keep learning.
Credit to following link for Popular Device Screen Resolution Sizes
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
Credit to following link for great explanation of Responsive Design
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries
I am currently designing a site for my brother using Joomla 3.4 and Bootstrap. This is the first time I will be building a responsive site and wanted some advise on what to make sure I have within my CSS i.e. font sizes in particular units.
I am aware that I will need to use media queries to target each viewport, but one thing that confuses me is trying to workout what sizes would sit well for a smartphone, not sure if theres a guide list to follow to help me out.
If somebody could please advise, would really appreciate it.
Since you're using Bootstrap, you should use its Grid System
/* Extra small devices (phones, less than 768px) / / No media query
since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */ #media (min-width:
#screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */ #media (min-width:
#screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */ #media (min-width:
#screen-lg-min) { ... }
and here is the link you can check more on.
I try to adapt my website to smartphones. I used media types to do it:
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {
/* Style here */
}
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait) {
/* Style here */
}
Testing: I charge the webpage and it looks perfectly (portrait mode for example), change the orientation of the smartphone and the webpage adapt to landscape mode perfecly, but comeback to portrait mode and the website turns to the "PC mode" (Don't using landscape-mode).
What can I do to fix this?
I solved it.
I used another media type:
#media (orientation:portrait){
}
(for example for portrait mode)
and now it works every time I change the orientation.
I am not getting how to write bootstrap media query for 768*1024 and larger devices. I know I can use #media then screen size{}, but I have write css for each and every tag button and rest elements? Is there any shortcut way? If I have to write then how can I write. Please someone provide me, sample code for bootstrap #media query to make my app responsive in tablet like devices.
Thanks in advance.
...depending on the size of the device there are many classes that help you achieve what you want in specific resolutions.
First of all in the customizer of bootstrap before downloading you can set your own breakpoints, then depending on the class you can use -xs- -sm- -md- -lg- along with the class you want to use it just for the specific resolutions.
For example:
using class 'visible-xs-block' means that this class that applies the display:block style, will only appear in XS devices - this depends of if you have custom breakpoints or using the default which is for devices up to 767px
edit: if you were using the class 'visible-lg-block' instead would mean that the class would only be applied for large devices (≥1200px).
Of course you can mix and match which classes you want, you can use both of these classes on the same element like:
<div class="visible-xs-block visible-lg-block">
..that would make the element visible only on xs and lg devices.
You can learn the functions/etc by using the help online;
http://getbootstrap.com/css/
Bootstrap is already responsive for tablets and phones as long as you use their grid system (try viewing the main Bootstrap site in such a device for examples). You'd only need media queries if you wanted to override or extend its default responsive behaviour.
Sudarashan I think if I read your further comments right, that you have an issue with specifically the 768px width screen size upto 1024px.
This code (taken from the Bootstrap site) shows the standard breakpoints at which bootstrap operates.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Your initial question mentions that you are looking to respond between 768px and 1024px. This would start responding within the parameters of sm (small) 768px
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
BUT, would then run into the md (medium) parameter 992px (and above) all the way up to the desired 1024px that you are aiming for.
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
The solution
In this case you might be as well writing a new media query confined to the parameters you require here. From my understanding that would be as follows:
/* Custom sizes (768px to 1024px) */
#media (min-width: 768px) and (max-width: 1024px) {... }
This should provide the required breakpoint that fits your app I believe.
There is someting i definitly don't get with the "mobile first default behavior" in bootstrap 3 :
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
How can Extra small device be the default behavior if there is no break point at 480px ? I understand the default for font-size and stuff, but for the grid system, if a want a 6/12 sized block between 480px and 768px (col-xs-6), to become 12/12 at less than 480px then you just can't do it ? I need you guys to explain the concept, because i don't see how this can be a mobile first behavior.
PS : I know the community provide stylesheets to get a 480px breakpoint, and i can do it myself too, but considerating the fact bootstrap is a great lib, it seem weird to have this kind of trouble, maybe i just don't get the point here
The general assumption is that content is displayed the same way on every device / browser window that's smaller than 768px. If you need to distinguish below that breakpoint, you have a few options:
Write your own CSS that covers your needs in addition to Bootstrap's defaults. Be careful not to run into problems with code order or specifity that might cause the wrong styles to take precedence
Bootstrap is customizable, among other things you can adjust Bootstraps breakpoints to your needs.
If you're feeling adventurous, always on the bleeding edge or (depending on your use-case) just reckless, you could also use Bootstrap 4, since it introduces a 4th breakpoint (which gives you 5 different sizes) to better target devices in landscape mode.
Here's the relevent CSS from Bootstrap's V4-Docs, don't be confused they switched from px to em as their primary unit for measurements:
// Extra small devices (portrait phones, less than 34em)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up)
#media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
#media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
#media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
#media (min-width: 75em) { ... }