How can i specify a box to be 1x1 inches. That should be printed as 1x1 inch box and will be seen as 1x1 inch box on screen.
JSFiddle: http://jsfiddle.net/eR9CS/
Inches:
<div style="background-color: red; width: 1in; height: 1in;"></div>
Centimeters:
<div style="background-color: red; width: 1cm; height: 1cm;"></div>
Relative length units
em The computed font-size.
ex The height of a lowercase "x".
px Pixels, relative to the viewing device.
% Percentage.
rem The font size of the root element.
vw The viewport width.
vh The viewport height.
vm The smaller value of viewport width or height.
ch Zero-width (width of the zero glyph in the rendering font).
Absolute length units
in Inches (1 inch = 2.54 centimeters).
cm Centimeters.
mm Millimeters.
pt Points (1 point = 1/72 inches).
pc Picas (1 pica = 12 points).
If you want to use centimeters everywhere but want an inch, use style="width: 2.54cm; height: 2.54cm;" since 1 inch = 2.54cm.
This is not possible. You can only get some approximations. Setting the width and height to 1in is your best shot, but it’s not a particularly good shot, as you can see if you measure the dimensions (on different devices). As the CSS3 Units module describes, the so-called absolute units can be anchored either to physical units or to pixels. The fixed relations like 1in = 96px then implies that (except by accident) CSS in is not the real physical inch or CSS px is not the real physical pixel.
On paper, you could expect a physical unit to be the anchor unit, so that in would really be the inch. But even this expectation often fails.
Related
I am creating a website that is mobile friendly. I've defined a fixed size for all buttons.
.btn
min-height:45px
When moving from a large screen to a small screen does the size of the pixel scale? For instance, if on a large desktop screen, 45px takes up 1% of screen height will it also take up 1% of screen height on a small mobile screen? It looks like it doesnt scale proportionally to the height of the screen. Should I be going about this a different way? Thanks!
No. It is not. If you want to scale your web app, you should use relative units like %, vw, or vh.
You can read more about it here.
And you can study how to view your web app on different sized viewports here.
No, pixels are not relative to screen size. If you want to use a relative suffix, use the % suffix. This will make the style relative to the parent element. For example, if the parent element is the <body> element, then width: 100% will make the element's width the size of the page.
No, a pixel does not scale. If you would like your html elements to scale, use vw (view width) and vh (view height) instead of px (pixels).
This varies from one device to another.
Px is in no way non-visually comparable to any relative units like vh, vw, % etc etc.
If you want to know what px means as exact as possible see here.
Why bother with pixels? One person has a very large display with very few pixels, another has a medium display with medium density, let's say 1080p 24inch, and yet another is using a 1440p phone display.
What is even the point of using media queries using pixel sizes??? How do I query the actual display size in centimeters, which is exponentially more useful?
What I want it for: actually reliably determining whether to use mobile or desktop style.
No JS, it is too slow.
Difference between Viewport and Resolution
The Pixel & Pixel Per Inch
Mobile and other similar devices' screens are contained on pixels (individual points of color) and together when all pixel display feels like an image. Number of pixels on the horizontal axis and the number of pixels on vertical axis called resolution. The sharpness of images/text or anything which is displayed on a screen depends on the resolution and screen size. The same pixel resolution will show sharper on a smaller screen and gradually lose sharpness on large screens because the same number of pixels are being spread over a large n number of inches.
Normally the screen's physical size calculated in inches and as resolution depends on the screen's physical size so to determine screen's resolution unit is called Pixels Per Inch.
Number of pixels increases per inch it increases the quality of display and ratio. Here is a question: how many pixels in an inch so we can calculate resolution of a screen? Well, there is no specific answer because we can't set some single value for all screens it also varies from screen sizes Typically it lies between 72 - 162 pixels per inch and its value increases as the screen goes smaller.
Viewport
Device's visible area for a user is called, the actual viewport size of the screen.
Viewport screen size
Viewport screen size is the actual resolution of any screen and it depends how much unit of pixels per inch simply. Viewport always remains same in terms of screen size as screen size remains same but resolution to display it, is changeable for example old 15" monitors can display different resolutions from 800 x 600, 1024 x 768 and 1280 x 1023 so it depends on focus ability of a screen.
Note that As resolution goes smaller from its original or maximum display resolution, you will get blurry results because the same number of pixels is now spreading on big viewport size.
CSS Pixel Ratio
An inch can contain about 72 - 162 pixels. Let's consider 132 pixels per inch for a mobile as a unit for every device. One unit pixels equal to 1 CSS pixel ratio. So if unit pixels increases, CSS pixel ratio will be increased. For example a device has 296 PPI then it's pixel ratio can be 2 (after point can be ignored).
Resolution, Viewport and CSS Pixel Ratio
The resolution depends on CSS pixel ratio. If cases pixel ratio increases the resolution of the device can be increased, but remember viewport of size, which is the actual visible size of the screen will not change. The maximum resolution of a screen is actually a multiplier of CSS pixel ratio.
Example
iPhone 7
Viewport size: 375 x 667 Pixels
Resolution: 750 x 1334 Pixels
Pixel Density: ~326 ppi
CSS Pixel Ratio: 2
I originally had all the font sizes defined in px units
Then i read about responsive font sizes everywhere and i was inclined to use VW units for font sizes
So i just converted all the px values to vw using a converter and changed every px font value to vw unit in my CSS ( the values of vw ranged from 3,4 to 6,7 )
i was using a mobile phone while doing so and the new VW units for fonts looked as good as px units on my device ( all good till here )
Today i tried my website in dekstop and it looked horrible , the font was so big that the whole screen was filled with just 3 lines of text ;-;
Now i know ,i can use media Query to define a lower value of VW units for dekstop ( large width )
But then I don't understand what's the point/benefit of using hyped vw units for font size , i can just use media Query for px font size too and call it responsive
If someone has a better approach to my reported problem , please suggest something
CSS vw is 1 percent of the width of the window. CSS units reference
So if you set something to 10vw on a mobile device with a width 300px it will be 30px. (300px/10 = 30px). However, on desktop say 1000px wide 10vw will be 100px. You see why it changes drastically.
Basically, you probably shouldn't use vh/vw for font sizes. You should use other percentage-based units like em, rem or %. Reserve viewport-width & viewport-height for large scale layout needs like column sizes or footers.
For example i have this centered element with margin-top: -10%;
and i want on resize, more the window shrinks less that % become (like -6%).
I know of vw and vh, but those almost don't change at all on window resize if the distance we're working with is something small.
Is there a way with some margin-top: calc(); maybe with * doing some weird math trick to achieve what i mean?
For wide window, I added a media query. I used 1300px as an example. If the window is resized to larger than 1300px, the margin will be constant.
When the window starts to shrink below 1300px, the margin starts to change radically. I achieved this with this calculation:
margin-top: calc(-30px + 1300px - 100vw);
As you can see, at 1300px the margin will be exactly the same as if it would be bigger and it would use the media query, because
I subtracted the original margin,
then I added the breakpoint width (=1300px),
and then subtracted the window width which is exactly the same in that moment (=1300px).
So basically we use that as the "starting point". From then on, the more the window shrinks, the more radically the margin will go in the positive direction, because the shrinking width is negated in the equation. (Meaning, we increasingly negate less as the window shrinks.)
Play with it here to figure to achieve your own ideal numbers:
https://codepen.io/bradib0y/pen/xyzJYE
If I specify the width of a <div> tag using CSS as 96px, how many device pixels should that occupy on the screen of a first generation iPhone?
I added <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> to the page, took a screenshot on the simulator, and measured the div to be 96 device pixels wide. Now, I read the W3 spec for CSS pixels and it states that 1px is 1/96th of an inch. So 96 CSS pixels should translate to 1 inch. Since the original iPhone has a DPI of 163, one inch on the screen should occupy 163 device pixels. Why am I not getting that measurement? In other words, should 96 CSS pixels be equal to 1 inch?
I saw that the spec also mentions anchoring to a reference pixel. It seems to me that the reference pixel is simply a device pixel in this case. If I was to work backwards to get the CSS pixel values from a screenshot, would it generally be correct to assume that one device pixel equals one CSS pixel on the iPhone (non-retina display)?
Iphone pixels are like any other pixel. A 96px wide <div> is always 96px wide in any device. DPI (Dots Per Inch) just tell you the ratio between physical pixels (dots) on a screen (or paper) and inches and don't represent any size. DPI are only a ratio between pixels and a real world unit of measurement.
A 96px div would look 6x bigger in a 50 DPI screen than a 300 DPI screen.
DPI vary depending on the device or print/scan quality, therefore 1 inch is NOT always equal to 96 pixels. W3C is just saying that the absolute length units are fixed in relation to each other (it is just an arbitrary approximation to make CSS units consistent). This does not mean that real world units of measurement (inches, cm) can be given a fixed ratio to pixels.
The best help i can give you to understand this is that 1px is only and always equal to 1px. Any comparison between pixels and real world units depends on the DPI of a specific device, not on a standard like the W3C.
The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known.