Is it possible to scale font size based on screen height with only CSS?
For example, I have a sentence like this:
HELLO
WORLD
YOU ROCKS
Using this as my home page title and it is sitting inside a div that with 100vh.
What's is the calculation to make sure this text will scale and fit inside the div height? And if this is viewing in portrait mode, the font size will also keep to the max-width.
You can use
<p>HELLO
WORLD
YOU ROCKS</p>
<style>
p{
font-size:20vh;
line-height: 18vh;
}
</style>
limiting it to CSS using #media would likely be the easiest solution, create a rule for the popular screen-heights and change the font-size to a size you prefer:
#media only screen and (max-height: 600px) {
#div {
font-size: 80%;
}
}
Responsive Text
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.
Related
I have a menu that comes out on click, and the design of the font is very large, so when the screen height is reduced some of the text gets hidden. Is there a way to decrease font size for only when the height is reduced? not the width? Using a media query for height kind of messes with the mobile font size.
Is there another method that I'm not thinking of the fix this issue?
First screenshot is of the nav when the height reduced, you can see the text becomes squashed.
This second image is how the nav looks at full height. I want it to keep this spacing
You can use media query like this:
#media (max-height: 600px) and (min-width: 1024px) {
/* Styles */
}
You can play with max and min properties, according to the sizes you are looking for.
You can achieve that by using vh value for font size.
h1{
fontsize: 10vh;
}
I have a design that currently looks very squished on mobile because the font sizes are so big. My audience is split 50/50 on desktop & mobile readership.
Is there a way for me to create responsive font sizes? Can I scale font-sizes down to 80% when viewed on mobile?
Let me know if this is possible
I've tried adding the below code to get the font to adjust, however it did not budge.
<style type="text/css">#media only screen and (max-width:480px) {
#-ms-viewport { width:320px; }
#viewport { width:320px; }
body {font-size:80%; }
}
I expect font-size to scale down by a specified %, such as 80% on mobile.
To add a mobile specific font size to your email text, use a media query to set the font-size at a certain screen size. A responsive “fluid” way to do this is to use the viewport width unit (vw) instead of pixels.
Viewport-width uses 1% of the viewport width as the standard size from which to work from. For example, the viewport-width of an iPhone7 is 750px, therefore 1vw is 7.5px. In this case, we set font-size: 2vw to get 15px. This is responsive to screen size; as a viewport gets bigger or smaller the font will be responsive.
Along with font-size, we need to also adjust the line-height to ensure it is consistent. Experimenting with the number here can give different outcomes, and in the case above, line-height:3vw is enough to ensure the text isn’t squished.
To ensure the font doesn’t become too big, we add it to a class within a media query that will only work on a smaller viewport size. To ensure the font-size in our media query displays, we include !important to override the inline font style. Check out the example code below:
<style type="text/css">
#media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>
Then, we add the class mobfont to any text we want to resize:
<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>
More info here if you need it. https://www.emailonacid.com/blog/article/email-development/best-font-for-email-everything-you-need-to-know-about-email-safe-fonts
I use a 1920px wide screen. But when I inspect the html tag with chrome devtools on websites such as firebase or facebook messenger, this is what I see :
But these websites appear fullscreen, so I expected them to match my screen width.
Why is there a difference between my screen width (1920px) and the html tag width (1440px) and how to achieve this ?
If you set the width of the body of your HTML to a fixed width of 1440px, it will be 1440px even if the user screen is bigger or smaller than this. What you can do is set width to width: 100%; and a max-width: 1440px. That would make the size of the body to be the size of the screen if the screen is smaller than 1440px and 1440px if the screen is larger or equals to 1440px.
If I understood correctly what you are asking, you have a sidebar menu and a dashboard that needs to fullfill the screen. In that case, you could do:
.side-menu {
width: 20%;
}
.dashboard {
width: 80%;
max-width: 1440px;
}
#media (min-width: 1500px) {
.side-menu {
width: 100%
}
}
Using media-query makes you set different CSS properties for the elements in your HTML, depending, in this example, of the screen size. What I did: if the screen size is smaller than 1440px, the sidebar fills 20% of it and the dashboard fills 80%. If the screen size is bigger or equals to 1500px (a little big bigger than the max-width of the dashboard, to fit the sidebar also), the dashboard stays at 1440px and the sidebar fills the rest of the screen width (width: 100% makes the sidebar takes all the width that is left of the body).
Obviously in bigger websites such as Facebook etc it's a much more complex thinking than just CSS, because they have to consider the data flow, the device the person is using and many other things.
Either you have setup a DPI scaling on your PC or have the zoom level in your browser to something higher than 100%
I have some question about html and css.
Here are the case. I'm building a mobile web, which my base line is 240px width. So all my elements's dimension is set base on the 240 screen size. But when I view the web in a larger phone like Samsung Galaxy note. All things seem to be too small for user to click on it.
Now the question, is it possible to use variable kind of css for width and height ??
Lets say, the thumbnail I use in 240px width device is 50px, so when I view my thumbnail in a 480px width device, the thumbnail will be display in 100px, which means the thumbnail will be increase its size based on the percentage of the screen increased.
Yes, obviously you can, what you are looking for is called Responsive Design, to accomplish that, you will need #media queries.
Demo (Resize the window to see the effect)
div {
height: 200px;
width: 200px;
background-color: tomato;
}
#media all and (max-width: 400px) {
div {
height: 100px;
width: 100px;
}
}
Use percentages for your width instead of fixed width to make the images responsive.
For example, use 100% instead of 50px. It will automatically fill the container (in which the container is also responsive) and automatically resize on your browser.
yes ,it is possible,responsive design achieve in following ways,
All dimension in %
media queries
yes, you can use #media queries for responsive design
example:
div{
width: 50px;
}
#media all and (min-width: 480px){
div{
width: 100px;
}
}
(or) u can also use percentages at certain cases like width: 20%
When I get a psd(1750*2400),I found the images and font size were too big for lower resolution.Is it possible to make page fit in different resolution ? Thanks.
I usually divide this into 2. What I mean is that the dimension of the website, in this situation, is 875x1200. Thus for every spec, such as fonts, block width, image width should be divided into 2.
For example, the Header font size is 42px then you could apply 21px.
For images you can do this purely with CSS by specifying the width and height of your preference. The browser will resize the image (though if you don't choose the right aspect-ratio the image may look obviously expanded or compressed).
img {
height: 300px; //whatever height you want
width: 200px //whatever width you want
}
For a responsive layout you can use CSS3 media queries to achieve the best look on different resolutions.
Example for responsive layouts:
img {
height: 100%;
width:100%
}
#media screen and (max-width:64em) {
height: 70%;
width: 70%
}
As for the font-size, you may have to sacrifice pixel-perfection at times for the best look and decide for yourself whether the font looks appropriate for the display or not.
This too can be controlled by using media queries though:
#media screen and (max-width: 32em) {
font-size: 1.5em
}