This question already has answers here:
Web and physical units
(2 answers)
Div width in cm (inch)
(6 answers)
Closed 9 years ago.
Every product in my eshop must be displayed in it's real life size (cm or mm) independent on the resolution my visitor is using to view it.
I'm searching for a solution that works on all browsers.
How can this be done?
How well do mm and cm measurements in css work?
As far as I know, in css you can use cm, mm and in as units for any property that takes a length value, so
height: 100cm;
Will set an element's height to 100cm as measured on screen. However, for a quick test I created a webpage containing the following:
<div style="height: 10cm; width: 10cm; background-color: red">
This div appeared 10cm on one monitor, 8.9cm on another, 6.35cm on a tablet and either 2.05cm or 3.3cm on my phone depending on the orientation. So while you can set absolute lengths in CSS, there really is no guarantee that is what you are going to get. Unfortunately I don't think there are any more accurate alternatives either, although you could always try slaughtering a goat to improve your chances.
the spec
Related
This question already has answers here:
How to keep website width fixed (irrespective of screen size)
(4 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Not suitable for this site
So I’m currently working on a basic html web page that requires me to have a static layout and a fixed width of 1000px however when I do that I’m left with space on both the left and right of the page but when it’s on auto my elements such as my nav and other container elements take up the space etc take up the full width. What am I missing ??
Any help would be great! Thanks
I didn't quite understand your question, but I think this is the solution
width:100%;
https://www.freecodecamp.org/news/html-page-width-height
As someone say in the commants, your page is not always x pixel size so It's hard to do but you can still do something like :
body {
width: 1000px;
height: 500px;
}
But the things is that some people have a small screen so they will have a scrollbar or maybe you can use a lot of Breakpoint
This question already has answers here:
How to resize images proportionally / keeping the aspect ratio?
(20 answers)
Closed 6 years ago.
I have a requirement where the same page can be used by different firms(our clients) and the image on the navbar must be their logo. Now, the logos that I am testing with are all of different size and dimensions.
I tried some ways like setting max height, max width etc, but since the logos themselves come in different sizes with height-width ratio different (say some are square an some are long names with an overall rectangle dimension like 380*200 ).
Now I need to somehow maintain this and still fit these images. Using css or HTML tags to achieve this.
I am currently working with something like this:
<img src="<?php echo $imageUrl?>" style="max-height: 180px;max-width: 40px"></a>
You could try to use percentages in the widths and heights instead of using fixed pixels.
E.g.
id/classofimg{
width:50%;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am using Ionic 2 for the development of an app and I need to preview the app in different sizes.
Currently, I am using vw in all the sizes including font-size, padding and so on, but when resizing the font it sometimes becomes a bit small and even sometimes the text is not readable.
For that reason, I would like to know what is best to use in this case:
px
%
vw
wh
em
Or do I need to use also the #media and support different font sizes?
Any thoughts?
Note that I only mentioned the ones you asked about.
Here you can see the full list of CSS measurement units: CSS Units in W3Schools
Rather than telling you which one is the "right one", I would rather want you to understand what each one actually is.
Pixels (px): Absolute pixels. So for example, 20px will be literally 20 pixels on any screen. If a monitor is of 1980x1200, and you set an element's height to 200px, the element will take 200 pixels out of that.
Percentage (%): Relative to the parent value.
So for this example:
<div style="width: 200px;">
<div style="width: 50%;"></div>
</div>
The inner div will have a width of 100 pixels.
Viewport height/width (vw/vh): Size relative to the viewport (browser window, basically).
Example:
.myDiv {
width: 100vw;
height: 100vh;
background-color: red;
}
Will make an cover the whole browser in red. This is very common among flexboxes as it's naturally responsive.
Emeters (em) and Root Emeters (rem): em is relative to the parent element's font size. rem will be relative to the html font-size (mostly 16 pixels). This is very useful if you want to keep an "in mind relativity of sizes" over your project, and not using variables by pre-processors like Sass and Less. Just easier and more intuitive, I guess.
Example:
.myDiv {
font-size: 0.5rem;
}
Font size will be 8 pixels.
Now that you know, choose the right one for the right purpose.
w3schools.com has a pretty nice summary about css units.
I for myself do always use em. Why?
First of all, em is relative to your font-size. So as w3school says, 2em would be 2 times of the font-size you've defined in your parent container. So you may define a specific font-size for your html tag and use whatever em you want, to handle relative font-sizes for various tasks.
Also, em is covered in mostly all browsers.
At least, you may use #media-queries to handle responsive font-size handling for mobile devices. So you may consider using #media-queries combined with a relative font-size by using em.
this is probably gonna get closed, but I love using the em units because they are very scale-able, esp in mobile browsers that being said, I do use media queries along with them. I really depends on what youre doing.
A good site will probably compose of a few ems and a few pxs ratio, so what ever your end goal is will should dictate which you'll use,
if you
understand each ones application youll be able to end up with which one you like more. W3Schools and W3code both have good articles on them...
This question already has answers here:
Google Font size 10.5 px (.5) the correct way and multibrowser support
(3 answers)
Closed 7 years ago.
Is "10.3px" is valid property value in css?
Can i apply value like this in pixels?
Eg:
p{
letter-spacing:10.233px;
}
Pixel is the indivisible unit for display. So browser can't "draw" .3 px. This will lead to different render of font in different browsers
If you need fine-grained control, sizing fonts in pixel values (px) is an excellent choice (it's my favorite). On a computer screen, it doesn't get any more accurate than a single pixel. With sizing fonts in pixels, you are literally telling browsers to render the letters exactly that number of pixels in height:
You can use it for percentage but not for pixel.
e.g.
p{
letter-spacing:3.5%;
}
In case of pixel. the values are truncated. So 10px, 10.233px, 10.9 px will show same letter spacing...
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm just a starter in html/css and I don't really know what should I use , I made some sites using % and it looked good in the beginning on my laptop screen (wide) but when I accesed the site at school the site was all looking weird cause the width was smaller and the height was bigger.
So my question is : Should I use px instead of % and what would be a good width to make a site with px.
900 or 960 px is almost always the way to go for your main content. You can however use percentages for some parts of your websites.
Like stackoverflow, you could have a main bar on top which has a 100% span across the page, whilst your content (the questions/answers) are within the 960px grid.
Take a look at http://960.gs/
Keep in mind you should also have to consider other screen sizes, so it might be wise to look at responsive webdesign ( http://en.wikipedia.org/wiki/Responsive_web_design )
However, it's up to what you want to accomplish to make the right decisions on what to use.
Pixels:
If you use pixels then, its an absolute measurement and will be rendered irrespective of the browser's window size.
Percentage:
Percentage is a relative measurement which will be rendered with respect to the browser's window size.
If you want to show some element to always appear in a fixed size, then use pixels, else use percentage.
The answer about the good width for a website is very well answered here:
What is the best absolute width for a webpage?
Refer the following article too. It will be helpufull to you.
http://www.sitepoint.com/best-size-website/