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

Start Muvi One 14-days Free Trial

No Credit Card Required

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

Related Blogs
EST (Electronic Sell Through) - The What, Why and How

EST (Electronic Sell Through) - The What, Why and How

  Electronic Sell Through (EST) has been a game changer since last year because the acquisition of digital movies and...

30 November 2022
Metadata Management - Makes your content Search Friendly and Easily Discoverable with Muvi!

Metadata Management - Makes your content Search Friendly and Easily Discoverable with Muvi!

  Why must you consider metadata management? Video metadata is highly essential for successful content recommendation as well as providing...

29 November 2022
How to Provide an Uninterrupted FIFA World Cup Streaming Experience to your Audiences with HLS?

How to Provide an Uninterrupted FIFA World Cup Streaming Experience to your Audiences with HLS?

    Soccer is a widely popular game and FIFA is the most watched event in the sports industry. A...

29 November 2022
4 Must-Needed Technologies to look for in a VOD Platform

4 Must-Needed Technologies to look for in a VOD Platform

  Are you planning to build your own VOD platform? There are several practical technologies to pay attention to for...

28 November 2022
How Improved CDN Helps Meet Surging OTT Demand?

How Improved CDN Helps Meet Surging OTT Demand?

  Content Delivery Networks are servers that are distributed geographically, and function together to serve your viewers faster and with...

25 November 2022






 

Get Offer
close-link