Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Measurement on a web site

Should you mix em with px?

As em is based on font size and px is based on the screen.

So the question boils does to - how to generate an image when most of the web site is using em ?

like image 720
Ed Heal Avatar asked Oct 06 '12 06:10

Ed Heal


People also ask

How do you measure the size of a website?

There are online tools to check a web page's size. For example, you can do it using https://tools.pingdom.com. Type or paste in the URL of the page you want to check and there you go.

What is a way of measuring the importance of website pages?

Page Authority is Moz's calculated metric for how well a given webpage is likely to rank in Google.com's search results. It is based on the Mozscape web index and includes link counts, mozRank, mozTrust, and dozens more. Moz ranks both pages and domains, updates regularly, and provides a ranking of 1-100.

What are some ways to measure a web page performance?

Tools that indicate or measure performance, such as PageSpeed Insights or the Firefox Network Monitor and Performance Monitor. These tools show you how fast or slow your web app or site load. They also indicate areas that can be improved to optimize your web app.


2 Answers

Normally, images have intrinsic dimensions in pixels. But you can scale them according to font size, if they are e.g. buttons that should match text in size. Just create a large enough image (scaling down works much better than scaling up) and set e.g. the height of the image to 1.5em. When you set height only and not width (or vice versa), browsers scale the image so that the width : height ratio is preserved.

However, buttons are better created using CSS, not images. Background images can be scaled using advanced CSS features (background-size), which however have limited browser support.

like image 127
Jukka K. Korpela Avatar answered Oct 05 '22 00:10

Jukka K. Korpela


1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement

pixels (a dot on the computer screen),px can be resized in IE as well. em is a relativ size to the inherited size by it's parent element and actually has the same meaning as %.

like image 21
Saeed Avatar answered Oct 05 '22 02:10

Saeed