I've added a media query for a page size < 800px, like this, and there is no change in size < 800px.
How is this type of responsiveness supposed to be done in App Maker?
Most media queries are supported for most widgets types. You can find expamles here:
https://developers.google.com/appmaker/templates/
In your particular case, most likely you need to add '!important':
width: 100px !important;
Related
My media queries work for all sizes I have specified when I use the responsive design mode in my browser. These same media queries will not work when I open my web App on a different device. For example, the height I have set for one of my div is: 197px for screen max-height: 700px and 290px for screen max-width: 1382px. When I use responsive web design, the media queries for both sizes work fine. When I resize my browser or open the same web App in my mobile (max-height below 700px), the media query is still rendering for screen width of 1382px.
Similarly media queries do not work when I resize my browser (on my laptop) instead of using responsive design mode.
What I understand is that media queries work on browser window size instead of the device's viewport size. I have tried using both media all and ```media screen```` and neither is helping resolve this issue. So, how do I write media queries to support browser window sizes?
Any help?
Thanks in advance
Two ways to solve the issue:
The not so practical way of adding a large number of breakpoints (for both max/min heights and widths). The problem that may arise is the ordering of media queries will get messed up, breaking the layout.
Using flexbox/grid at every level of your code. Even a floating menu or any other floating component should be put under a flexbox structure. In which case, you will have to write just the bare minimum number of media queries and the flexbox properties will take care of keeping your layout clean.
I was researching about CSS media queries best practices and found the Foundation's definition.
As you can see, the first media query has no min/max-size definition:
#media only screen { } /* Define mobile styles */
Why do they use this media query as it defines no break-point? Is this a best practice or should be avoided?
Thanks!
That particular media query applies to all screens (of any size, orientation, aspect ratio or pixel density).
screen is a media type. Whatever you put inside that media query will only apply to screen and will not apply to content of other media_types.
Here is the list of currently recognized values for media_type. Most of them have been deprecated. The ones you should use (as they are probably here to stay) are:
all (implicit if none specified)
screen
print
speech
The guys at Foundation probably should change the comment after that query to a more explicit one. Instead of /* Define mobile styles */ they should have probably used /* General styles, including mobile */.
Look at the structure of their media queries and you will notice it is a mobile-first CSS framework. As in: you define the general styles (including mobile) first and than apply exceptions for ever increasingly wider screens.
Media queries are not only for breakpoints. You can specify the output medium like screen. In this case, only display screens are targeted. You can also target only print media, or media with specific orientation or resolution.
See more information about media queries and media types on MDN or w3schools.
I am building a responsive full width website. Basically the content in the body will be fitted to the viewport.
My question is, What is the best approach to handle the font sizes?
Obviously I can't keep the same font size for all the resolutions. For some screen resolutions the font size may need to decrease and for some screen resolution the font may need to be increased.
The current method I am aware is by using Media Queries. I can write different media queries for different screen sizes and set the font size inside the media query.
Is there any alternative method of is this the most recommend way?
Thank you
I usually declare body { font-size: 1eM; } and in media queries for width < 600px I will change the body inside media query as font-size: .8eM , like that..
It is recommended to use media queries so you are on the right track. I could list some typical media queries used for common devices but I believe it best for you to browse this article instead: MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS This article also branches off to explain how everything is changing with the advent of moving to larger sized cellphones, etc. Another recommendation is to set your viewport setting using a meta tag as follows:
<meta name="viewport" content="width=device-width,initial-scale=1">
I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.
What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.
Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.
The better option is to utilize #media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:
#media screen and (max-device-width: 960px) {
font-size:14px;
}
#media screen and (max-device-width: 480px) {
font-size:13px;
}
Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.
As a side note, make sure to include these styles at the bottom of your CSS, so that they dont get overwritten by default styles.
Is there any way to progressively resize using media queries rather than at pre-determined widths? E.g.
Currently I have something like:
#media screen and (max-width: 1024px) { }
Now this will ONLY resize when the window hits that magical 1024px boundary... however, I need it to resize at every stage, not just 1024px.
If the user makes the window 10% narrower then the images and font sizes also need to reduce by 10%.
Is this possible with media queries or am I going to have to go down the JS route for this?
Thanks.
Just make the entire layout flexible. You could then resize the images using width: 90%; (or any value you like), Or use max-width:90%; if you don't want the image to upscale.
Gradually resizing the text is not possible using media queries or css, but you really shouldn't do that. People with smaller windows wouldn't be able to read the text, and people with big screens will have to sit back because the text is to big. Not to mention people using a mobile phone.
Yes, you can do progressively resize using vw, and vh. Do take note of the browser support though.
.h1 {
font-size: 50vw;
}