CODEWITHSUNDEEP
htmlcssresponsive-design
Abdulaziz Burghal
Abdulaziz Burghal

Reputation: 866

Screens HTML element sizes

I got xd.adobe link from the designer to implement it as web pages, so I'm taking the same px sizes that exist in adobe and putting them to my web page HTML elements, but what I noticed is the HTML elements look more zoomed-in in bigger screen, so if the screen is matching the screen sizes in xd.adobe the webpages will be identical otherwise it will be bigger, I read one of the solution is to stop using px and start using %, but will not be applicable because the project will be finished after a couple of days.

Upvotes: 0

Views: 38

Answers (1)

Jay Mehta
Jay Mehta

Reputation: 11

If you are trying to convert the px to any other sizing units, than I would suggest that you do so using rem unit. Basically rem unit is relative to the size of html root tag. To further understand it I recommend you to go through this site. Link

Here is an example of conversion:

* {
  font-size: 16px;
}

h1 {
  font-size: 50px;
}

#first {
  font-size: 12px;
}
<html>

<body>
  <h1>My First Heading</h1>
  <p id="first">My first paragraph.</p>
  <p>My second paragraph.</p>
</body>

</html>

And its equivalent css in rem:

* {
  font-size: 16px;
}

h1 {
  font-size: 3.125rem;
}

#first {
  font-size: 0.75rem;
}
<html>

<body>
  <h1>My First Heading</h1>
  <p id="first">My first paragraph.</p>
  <p>My second paragraph.</p>
</body>

</html>

Upvotes: 1

Related Questions