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">
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 am currently attempting to get a website to display some plain text with appropriate font sizes on both a desktop and mobile browser. Trying to choose a font size for both results in the text being too large on desktops and too small on mobile because of the different displays.
I have attempted using a media query to change the font size based off of the screen width.
#media screen and (max-width: 900px) {
body {
font-size: 2em;
}
}
This "works", but it comes with the caveat that resizing a browser window on a desktop will result in changing the font size if the width goes to or below 900px. I never want the font size to respond dynamically to the browser size. It should always stay the same size regardless of any window resizing that occurs. I will not consider vh and vw as solutions because of this requirement.
While searching around for solutions, I came across using dpi in media queries as an alternative. Since I assume the vast majority of mobile devices have a higher dpi than most desktop monitors, that could be a good way to change the font size on mobile.
#media screen and (min-resolution: 150dpi) {
body {
font-size: 2em;
}
}
But what if there is a monitor that does surpass this dpi? This works for the 3 devices I am testing with, but I cannot be sure that it will work in more cases.
Overall, my aim is to get something like the setup Wikipedia has. https://en.wikipedia.org/wiki/Dots_per_inch The font size does not change when resizing the browser, it displays at a readable size consistently on both mobile and desktop browsers, and I assume it will work quite nicely on a high dpi monitor as well, but I have no way of testing that.
So what is the appropriate way to get the functionality I am looking for?
After writing this question but before posting, I kept on searching for a solution and I found it. It's actually very simple, but easy to miss. I hope posting this helps others in the future. It all boils down to this line within the head of the html.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It's explained nicely here.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Average font-size for resizing screen you can get by using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
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.
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.