I would like to set up a responsive skin suing less. But I would like to use rems for mobile and px for desktop.
How do I do this?
Thanks
Since you are using less, you don't necessarily need to distinguish those, you can just use the fallback notation via a mixin:
// the size of your base element
#base-size: 16px;
div {
.font-size(18px);
}
.font-size(#size){
font-size: unit(#size,px);
font-size: unit(#size/#base-size,rem);
}
compiles to:
div {
font-size: 18px;
font-size: 1.125rem;
}
Related
I'm currently setting my font-sizes like this to make it easier with calculations in REM values:
html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* 16px */
However, Bootstrap 5 of course uses the root value (which would be 62.5%) to calculate all of the sizes. It does have variables like $font-size-root and $font-size-base and tried to play with those trying to get it to properly calculate things.
First I tried setting the root to the HTML value and the base to the body value, but that caused the wrong calculations and setting either the base or the root to 1.6rem or 1rem also caused the wrong output.
Does anyone know if it's possible to configure Bootstrap 5 to make it output a value matching with 32px (computed style) when I set this for example:
$h1-font-size: 3.2rem;
That way I could simplify the calculations a lot and Bootstrap would work with the same calculations as the rest of the CSS.
Thanks in advance for the suggestions! I tried a few searches here but couldn't find much related questions sadly
rem units are based on the font-size of the html element and the default size is 16px.
To achieve what you are doing, simple set the font-size: 10px to html. Example:
html { font-size: 10px; }
body { font-size: 1.6rem; } /* This will be 16px */
Now, doing it in Bootstrap 5 requires you to change the SCSS/CSS3 variable for body font-size. Below is an example of how to do it using CSS:
html { font-size: 10px; }
:root {
--bs-body-font-size: 1.6rem; /* Overwrite this variable */
font-size: var(--bs-body-font-size);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<p>This is 1.6rem or 16px.</p>
</body>
</html>
I got some example CSS code (well written and working) with many span statements inside, that I modified for my use. What exactly they do? VS Code shows me as an error, but browsers don't complain, and I couldn't find any references in the CSS documentation, as if this syntax does not exist.
Example:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
}
VS code complains:
"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",
If I add colon it would be suggesting keys right away, and would not accept anything in curly brackets{}
Thanks
the brackets { and } define scope so that
body {
color: #000;
}
Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)
however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.
body {
color: #000;
span {
color: #FF0000;
}
}
this would do as the previous css did, but in less you can create a hierarchy
the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)
CSS/LESS are used in conjunction with the HTML DOM object model.
You're correct that this syntax doesn't exist for CSS, as it doesn't support nested selectors like this.
The correct syntax would be:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
}
h2 span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
This syntax is of course perfectly acceptable if you use a CSS preprocessor, like SASS or LESS for example. CSS preprocessors compile CSS written like you've done into standard CSS syntax, and add extra functionality, like using variables and conditional statements.
I think that modern browsers are probably capable of understanding syntax like this in certain situations, but if you want to use to this sort of syntax then using a preprocessor is a safer option to avoid errors.
Sorry, I'm a little unsure of this.
I want my base to be 16px. But all the resources I read about rem use percentages, eg:
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
If I want all my rem sizes to be relative to 16px, do I just make html { font-size: 16px; }?
Why use percentages?
yes that's right. You need to make your html font-size to 16px as your base font-size and then use rem with the rest. Rem sizes the element relative only to html while em sizes relatively to its nearest parent.
I am making a responsive HTML email. When I open it on a mobile device (e.g. iPhone), the layout is responsive, but the fonts are tiny.
The only solution seems to be redeclare the fonts in a media query at a bigger size. Getting the right size takes a lot of trial and error.
Obviously, having two sets of font declarations is inefficient to maintain so I want to use SCSS to streamline it.
This is what I have at the moment:
h1 {
font-size: 28px;
line-height: 36px;
}
h2 {
font-size: 14px;
line-height: 18px;
}
#media only screen and (max-device-width: 615px) {
$increase: 8px;
h1 {
font-size: 28px + $increase;
line-height: 36px + $increase;
}
h2 {
font-size: 14px + $increase;
line-height: 18px + $increase;
}
}
This is good as I can just alter the $increase value to make my mobile fonts bigger. However, I have over 20 font declarations (for different emails), so if I update the desktop sizes (e.g. change h1 from 28px to 32px), I then have to update mobile declaration, which is time consuming.
Is there any way I can use SASS to have one set of font declarations and then automatically have the mobile versions increase in size (while still having the flexibility to do some custom overrides if the $increase value isn't suitable for a particular style).
Steps I have tried to overcome the problem:
1. Using Rem/Ems:
These don't seem to be supported by all Desktop browsers. Using PX seems to be the only way to get the size right.
2. Using Scale meta tag:
e.g. <meta name="viewport" content="width=device-width">
This causes some mobile browsers to display a white screen (Blackberry)
You can use rems! Use the font-size:62.5%; trick on your html element first, and then you can set up several media queries just to resize the rems.
#media only screen and (min-width: 385px) {
html{font-size:68%;}
}
#media only screen and (max-width: 370px) {
html{font-size:62.5%;}
}
#media only screen and (max-width: 350px) {
html{font-size:61%;}
}
#media only screen and (max-width: 330px) {
html{font-size:59%;}
}
And for the desktop clients that don't support rems you can just put your px definitions first in the inline css (or style tag):
font-size:14px;
line-height:16px;
font-size:1.4rem;
line-height:1.6rem;
I'm currently working on a way to get SASS mixin to copy the px values and convert them to rems, but it's tricky because of the decimal point. If i finish i'll post a comment! Or if you beat me to it please let me know ;)
The only thing you can really do is use extends, and I caution you to use them sparingly as they can really bulk up your CSS:
%size-1 {
font-size: 1.1em;
}
%size-2 {
font-size: 1em;
}
#media (min-width: 30em) {
%size-1 {
font-size: 1.2em;
}
%size-2 {
font-size: 1.1em;
}
}
h1 {
#extend %size-1;
}
h2 {
#extend %size-2;
}
You should not need to modify your line-height every time you change the font-size if you specify it without units (eg. line-height: 1.5).
I'm a no expert in CSS, but have this task to increase font size on the site.
The site uses a downloaded CSS-theme. As I see there is a single file main.css which contains definitions of fonts. In other css-files font-size is set using percentages.
However, there are 102 matches for the word font-size in main.css itself, because it sets sizes for all possible html elements and their combinations, like
body { font-size: 13px; }
h1 { font-size: 32px; }
h1.smaller { font-size: 31px; }
h2 { font-size: 26px; }
and so on.
I am thinking to write a script that would extract values of font-size $1 and replace them with $1+1.
In a while, probably there is a more elegant solution? Maybe I can redefine font sizes some way using CSS itself?
I used the following PHP script to convert all font-size: [0-9]+px values into em:
<?php
$filename = "MyCss.css";
$css = file_get_contents($filename);
$css = preg_replace('/font-size\s*\:\s*([0-9]+)\s*px/ie', '"font-size: " . ($1/16) . "em"', $css);
file_put_contents($filename, $css);
Your example CSS above became:
body { font-size: 0.8125em; }
h1 { font-size: 2em; }
h1.smaller { font-size: 1.9375em; }
h2 { font-size: 1.625em; }
I'd then recommend setting a baseline font-size on the HTML element:
html { font-size: 16px; }
Then, if you want to globally affect all font sizes on the page, you can change this single value, and all fonts using em units will scale.
You could also use percentages if you'd rather, but em's are usually preferred.
(Sorry, Ruby is one of the few languages I don't know)