Question 214631 in CSS Question posted in
Some basic documentation can be found here.

Css – Looking meaning of calc(1.25rem + 0.30vw)

I saw calc(1.25rem + 0.30vw) in bootstrap and I didn’t get what it means. I am using bootstrap for the design a responsive page on a website. Please help

I am expecting meaning of it with calculations

enter image description here

Tags:

3

Answers


  1. 0

    rem units are calculated relative to the font-size of the root <html> element (by default this is usually 16px). vw elements are calculated relative to the viewport width, where 1vw is 1% of the viewport width.

    So assuming that the root font-size is 16px and your viewport width is 1280px, calc() function would be calculating

    (1.25 * 16px) + (0.003 * 1280px) = 20px + 3.84px = 23.84px

    You can read more about the different CSS units here: CSS values and units (MDN)

    Login or Signup to reply.
  2. 0

    calc() is one of the few CSS functions. As the name indicates it will calculate a value, allowing for simple math in CSS.

    rem stands for Root EM which is the root font-size. By default, the UA (User Agent = default stylesheet of the browser) of most browsers will use 16px. That means, that 1.25rem equals 1.25 times 16px or 20px in total.

    vw stands for view width it is a percentage of the viewport’s width (the width of the browser). Assuming you run a browser in full screen on a 1920x1080px monitor, the viewport width will be 1920px. That equals 5.76px on that view width (1920 x 0.003).

    Taking the calc function into account the width will mean 20px + 5.76px = 25.76px. However, as those are responsive units, the value will change on different screens and root font-sizes.

    Login or Signup to reply.
  3. 0

    It means that the font-size will be calculated dynamically, based on the client’s viewport width plus the root element’s size multiplied by 1.25. For example, if you have a viewport width (the available width where you can view the website content) 1000px, you will get 300px by specifying 30vw. Then check the html element font-size property. The default is 16px if you don’t find it, then you will get 20px (1.25rem). Finally, you’ll have 20px + 300px = 320px.

    If you don’t want to do all of these calculations, you can just check the Computed tab in Inspect window to see the actual value calculated for your element.

    Here you have different things to be clarified,

    • font-size, it’s an obvious one, it defines the size, usually in pixels, like font-size: 16px.
    • rem, it’s the root element size (root-em, em comes from typography, you can think of it as the width of the letter M), and it’s a relative unit. The root element is the html element, and the default value for rem is 16px. But if you have explicitly specified it,
      html {font-size: 10px} then 1rem will be 10px, and 1.25rem will be 12.5px.
    • vw, viewport width, means that 1% of the viewport if you have 100vw then you will get all the available width in pixels from the device viewport. If you resize your browser window or open the website in your mobile app you can specify 50vw, so you will always get half of the viewport without worrying about the size in pixels.
    • calc() method, this just does the calculation explained above in your CSS.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search