I want to change the font size of my page when it is viewed on galaxy fold device. But I am not sure how to deal with this using media queries. Can anyone help me and give me an idea about how can I remedy this ?
If you need media query for folded version of device you can use 320px screen width.
There is no other device with such screen width from popular ones so you can simply use this media query. Alternatively you can use JS module from npm to detect device and change font size dynamically
#media(max-width: 320px){
font-size: 10px
}
if you use just #media(max-width: 320px) , the code will be effect on others devices example : (Galaxy S8 Galaxy s7 ... ), use this css to fix the problem :
#media (min-width: 280px) and (max-width: 320px) { .your-class { font-size: 10px; } }
As of right now, there is a draft for a device posture API. Formerly it was the 'Screen Fold' API that would allow media queries of the type:
#media (device-posture: laptop) and (spanning: single-fold-horizontal){}
This would generally solve the issue of responsiveness for folding screens.
Sadly this isn't implemented yet, and alternatives like using a navigator.useragent property are unreliable and not recommended.
It's still in draft stage(as of Sep, 2022), but there's #container media query: https://drafts.csswg.org/css-contain-3/
In MDN web docs,
This doesn't quite achieve what media queries do for our entire layout however. Media queries give us the ability to size things based on ranges. When we add a class or target the element we decide that when the object is in the sidebar it must use the stacked layout. In terms of available space however, it may well be that on large screens the object in the sidebar would have enough space to display in the side-by-side layout.
Meanwhile, I think #media is the most viable option available for now as #Gîrbu Nicolae stated
#media (min-width: 900px) and (max-width: 911px) and (orientation: portrait) {}
Tolerance ~5px, working fine for me, I test it
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
My media query works on Android in all browsers but not on IPhone. I have IPhone 6s Plus and when I opened my website, it crashed the page. On other IPhones it's just css in mess. What's the problem?
#media only screen and (max-width:768px) and (orientation : portrait) {}
Just use :
#media (max-width:768px) {
}
In my opinion, the other parameters are irrelevant, they just lead you to messy stylesheets.
But keep in mind that a better approach may be to set breakpoints based on content and layout.
I advise you to read this SO Post
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.
This is part question, and part hope for confirmation. I have my suspicions about the answer to this, and will add my two-cents, but I'd like independent confirmation since the Win8 Forums don't have this particular feature documented very well that I could find.
In Windows 8, when building Metro Style Applications using HTML/JS/CSS, the templates all include a series of CSS Media Queries in default.css. They are:
#media screen and (-ms-view-state: fullscreen-landscape) {}
#media screen and (-ms-view-state: filled) {}
#media screen and (-ms-view-state: snapped) {}
#media screen and (-ms-view-state: fullscreen-portrait) {}
I'm quite familiar with Media Queries, so my questions are: Why the need for vendor-prefixed expressions in Windows 8, and how do the -ms-view-state expressions differ from the W3C standard expressions like width, height and orientation?
Here's my take, please add yours below, and confirm, deny or correct me: I suspect that these rules are similar to the standard rules, but are a bit more adaptive, meaning that rather than defining sets of rules that match to a given width and height, these expressions encompass a state in a resolution-agnostic way. Because of this, I can use a single rule for my application in landscape mode -ms-view-state: fullscreen-landscape and it will work when the app is running at 1366x768, 1920x1080 or 2560x1440. Otherwise, I would have to define these rules three times:
#media screen and (width: 1366px) and (height: 768px) {}
#media screen and (width: 1920px) and (height: 1080px) {}
#media screen and (width: 2560px) and (height: 1440px) {}
Assuming my assertion is true, the only gap for me is why I couldn't then just define a single rule using 'min-' and orientation to achieve the same result:
#media screen and (min-width: 1366px) and (min-height: 768px) and (orientation: landscape)
Single rule, standard expressions. No need for a vendor-prefixed version. What am I missing?
In response to your two questions
Why the need for vendor-prefixed expressions in Windows 8?
Because view-state is not a part of the official CSS3 spec and vendor prefixes are there precisly so vendors can independently try new things outside the spec without breaking it for everyone else.
How do the -ms-view-state expressions differ from the W3C standard expressions like width, height and orientation?
They appear to be more semantic in their meaning and less restrictive on actual screen resolutions or sizes.
And while yes, your css media query of #media screen and (min-width: 1366px) and (min-height: 768px) and (orientation: landscape) does infact reduce the three lines youd previously posted down to one, it dosnt really describe what the -ms-view-states look like their trying to achieve.
They seem to be trying to give the developer/designer context to how their application is currently being consumed, explicitly stating the app is running either fullscreen or snapped (which i assume is the side by side mode microsoft have demostrated for having multiple apps running in metro simultaneously).
Update
Microsoft have released a blog post talking about their design decisions around screen resolutions and such. Which is pertinant to this conversation and is available here
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).