Muvi Blogs

Beyond The Buzz- Latest Insights From Muvi

Please wait while we enable your Account

0%

Contacting Amazon Web Services
Deploying Cloud Servers, Storage, Transcoding & Database Servers
Deploying Global CDN
Deploying Firewall & Enabling Security Measures
Deploying the CMS & Admin Module
Deploying Website, Mobile & TV Apps framework
Creating your FTP account
Finishing up all the modules
Preparing for launch

EM vs REM vs PX 15 March 2021

Pixels, EM’S, and REM’S are very much popular in the CSS world, but it’s often confused and mistaken with one another.

Pixel(px)

They are the most commonly used unit over the CSS, and the only thing you need to understand is that, if you resize an element as large as 100 pixels, then it’s gonna look big and gigantic on your laptop screen. The problem arises when you want to view the same content on a smaller screen, like your mobile screen, because it’s have the same gigantic look on a mobile screen as well. So be cautious when you are designing responsive websites, as pixels are not dynamic compared to em/rem.

EM

EM’s on the other hand is totally relative to their parents. So for example, let’s say you have a <div> tag and you assign it with a size of 10px. Now, if you define a <p> tag inside the <div> tag, with a size of 2em, it means that it’s going to be twice the size of its parent, which in our case would be 2 times 10pixels i.e 20px. Now, the problem here, is that it gets extremely messy if you have too much nesting and have defined every tag under every other nested tag into an EM. For instance, let’s say your <body> tag is defined as 32px, and inside that, you define a <div> tag of 2em, which means your <div> tag is now 64px, and now if this <div> tag has a <p> tag of 2em within it, then it would be around 128px. So basically, it’s too relative to its parent, thus be cautious while using it!

rem

Now the third buddy we got is the REM (Root EM). To be honest REM’s are way easier and relative than any other units in CSS. REM’s are always relative to the root <html> tags. HTML tags are by default as 16px, so if you define a <h1> tag with a size of 2rem, then it means it has a size 2 times 16, which is 32px. So, no matter how messy and nested your code is, it will always be relative to the root HTML tag which is 16px by default.

So that is basically it, I hope you got what you came for. I know it’s been a while since the last article, and it’s because there’s still a JavaScript void we are yet to cover. 

Don't forget to share this post!


Ratikanta
Rati is the Director of Platform at Muvi. He has 12+ years of experience in Yii, Magento, PHP, Wordpress, MySql, Opencart, and Amazon EC2.

Latest Posts

Try Muvi One free for 14 days

No Credit Card Required

.muvi.com
Your website will be at https://yourname.muvi.com, you can change this later.

Related Blogs
Get a Free ‘Exclusive’ Visitor Pass for The NAB Show Las Vegas, 2023,with Muvi

Get a Free ‘Exclusive’ Visitor Pass for The NAB Show Las Vegas, 2023,with Muvi

Muvi – the world’s first no-code OTT platform is ready to showcase its powerful features at the NAB Show 2023,...

23 March 2023
The Importance of Security in eLearning Platforms

The Importance of Security in eLearning Platforms

  In recent years, eLearning has become increasingly popular as a means of accessing education and training online. With the...

20 March 2023
Design Stunning VOD Websites & Applications with Muvi Visual Designer at NAB 2023 Las Vegas

Design Stunning VOD Websites & Applications with Muvi Visual Designer at NAB 2023 Las Vegas

  Celebrating 100 years of broadcast media and entertainment innovation, NAB 2023 is just a few days away. The best...

17 March 2023
5 Reasons to Meet Muvi at the NAB Show 2023, Las Vegas

5 Reasons to Meet Muvi at the NAB Show 2023, Las Vegas

  Muvi – the world’s most easy-to-use no-code streaming service provider, is gearing up to showcase its latest features at...

16 March 2023
On Premise Vs Cloud: Which is Best for your Video Business?

On Premise Vs Cloud: Which is Best for your Video Business?

  On premise Vs cloud – in order for us to determine which is best for the video business, first...

13 March 2023




 

Book a Meeting
close-link