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 9 years ago.
Improve this question
I am creating a new web page that should work on different devices and I am using fluid layout. Should I use pixels or ems in fluid layouts for font size? And what about paddings etc?
For fluid layouts you will want to use percentages. Pixels are relative to a monitors resolution and EMs are relative the the font-size and pixel density. Percentages, however, are relative to the size of the window in which they are placed (or their parent's width). For that reason, it is the best option for fluidity. Your padding can also be percentages, just keep in mind that the values are relative so it can get tricky with spacing things equidistant.
For fonts, ems are perfectly acceptable since they are based on the font itself. Also, by using ems for fonts, you allow yourself to scale the font for the entire site just by changing the documents font size.
If you use em's you can use css media queries for different device widths.
Using px on the body font size and em's on everything else means all font sizes will be relative to the body. You can then include media queries that just increase or decrease the body font size, and all other font sizes will change relative to it.
You can also then include web accessibility buttons that increase font size for those with visual impairments. The button would also just change the body font size (again changing all other fonts relative to it).
Em's all the way!
(Extra edit)
Also if you're thinking about font size in depth, you could also consider vertical rhythm/baseline for your site. Check out these links:
http://alistapart.com/article/settingtypeontheweb
http://typecast.com/blog/4-simple-steps-to-vertical-rhythm
Setting px for the body, then em for all other font-size, line-height, margins etc. will enable you create fluid designs whilst maintaining the vetical rhythm. Badass.
I find 'ems' are better to use in a fluid layout or any layout for that matter.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I don't fully understand how to determine rem, em, px, or %.
I know what each one means, but it's still unclear to me to know when to use each one. What are the criteria for knowing which ones to use?
Your input is greatly appreciated.
Pixels px, points pt etc are considered as absolute units. Good place to use pixel definition is when you want some element maintain consistent sizing i.e. the element should not be resized. E.g. icons, certain images or layout decorations could be defined using px.
On the other hand em, rem, %, vw, vh etc are relative units and better fit for responsive design. Relative units are calculated from the base sizes. Difference between em and rem is that em is based on the parent element whereas rem is based on the root element. These are good for font sizing, e.g. if the user defines their browser base font to 14px (normally 16px is the default size), the website fonts using em / rem would adjust to its users wishes but px would not do so.
Percent definition % is commonly used in layout elements where the overall layout is broken down into percent sized columns. These columns will adjust when the screen size changes, and alongside media queries these column percentages can be thereby adjusted based on screen size.
From my personal point of view viewport width vw and viewport height vh are less used but useful when you need to layout something according to actual viewport size. E.g. creating 2 colored or layered background could be one use case for this.
The units cm, px, pt etc are known as absolute length units and are used for exact sizes and would not change based on many factors like screen size. Units like vw, vh, % etc are known as relative size units and change based on the size of the screen you are viewing the page on.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am learning about responsive images and was wondering if I set, for example, an image with a width of 100px and height 100px, then, will that be smaller on a high-resolution screen? Is everything set in pixel (px) (font-size, width etc.) displayed differently on different resolution screens and do developers need to account for this?
there's a lot to this question. at its most basic, yes, if you set specific pixel dimensions to an element, then this will show up as the same number of pixels on different devices, but probably different physical dimensions due to varying pixel density.
in CSS (the language used to style web pages) there are other units such as %, em, and vw/vh/vmin/vmax which are relative to something, and these enable developers to lay elements out in a way that is much more flexible to changing screen sizes.
finally there are #media-query's which let developers provide different dimension depending on whether the screen is one size or another. for example, you may wish an element to take up the whole width of the screen on a small screen, but on a larger screen only take up a portion of the screen.
take a look at w3schools for more information, particularly css units and responsive design
Yes, webpages are being optimised for multiple devices. There are many techniques to be used and you should definitely keep learning them. This knowledge is not just essential for coder, but useful for graphic designers as well.
Very often you can see pages using CSS Media Queries or source srcset in the context of an img tag. One classic is for example to be seen at https://www.apple.com/ -> inspect the page source to see what is going on. There is plenty of good articles regarding the issue at sites such as #CSS Tricks.
PX is a set size. Meaning, an element's height on a computer will be the same height as on a tablet. It will not resize. Using %, em, vw, or the other ones, they are resizable and they will adjust depending on screen size. You can test by adjusting the window size when you run your program.
Read up on responsive web design
https://www.w3schools.com/html/html_responsive.asp..
You can have a single website design optimized for different devices using various configurations like setting the
viewport
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Using the width Property
Width:
<img src="answer.jpg" style="width:100%;"> - Setting the width property allows the image to be scaled up and down if need be.But one thing to note with width property is the image can be scaled up to be larger than its original size. So you can use max-width
Max Width:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
Responsive Text Size
You can use the "vw" unit which stands for viewport width which means the text will match the browser window.
Media Queries
You can always define completely different styles for different browser sizes.
#media (max-width:800px) {
.left, .main, .right {
width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
}
}
Frameworks
Alot of frameworks out there already have this done for you and to avoid doing it from scratch you can use them. One example is Semantic UI .
Most of these frameworks already follow best practices so it would be awesome to use them and also most of them are community driven.
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...
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I went through other threads like this but I still don't quite get it. IMO I shouldn't use anything but percentages because everything needs to scale differently at different resolutions and that can only be done with percentages (right?).
EDIT: Here's the simple more specific question. I want to make my website responsive at the easiest way possible only using CSS and HTML. Is that better now?
You can use a combination of both, for example
main {
width: XXrem;
max-width:100%;
}
So the element will have optimal font size-related width on larger screens but won't trigger horizontal scroll if the width calculated from rem is larger than viewport.
Another example:
main {
width: 100%;
max-width:1024px;
}
Now you have a container that fills the viewport on smaller screens, but is fixed at 1024px on larger screens. Easier than setting breakpoints using media queries.
You should also look into viewport based units: vw, vh, vmin, vmax - these are a bit like using percentages, but 1vw is always 1% of the viewport width, not the parent container. And you can use these units for anything (like font size or border width), not just cointainers. You could even use vw to set the font-size, so units like em and rem would be related to the viewport.
You can stick to any one or you can use both. Use percentage if you don't want to write more css in media queries. Elements size will become automatically responsive if you use percentage. You can also use any of px, em or rem if you can handle in media queries.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Every website has elements and their width and height must be set. here is my question how do we can set the width and height such that the website works correctly on different monitors with different width/height? is px preferred to %? when we should px and when we should use %? what are advantages and disadvantages of each one?
It all depends upon the type of your website and how you want to response to various screen resolutions.
Just using % and px is not enough, there are other unit for text size for example em and pt etc.
Also we have media queries
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
http://www.htmlgoodies.com/html5/client/common-techniques-in-responsive-web-design.html#fbid=YIeEpYZXBt-
Relevant SO Question Responsive Layout - PX, EM, or %?
Use px when you want to specify a fixed/static height in pixels. % refers to the percentage total of the elements parent. Using percent means the web site will adapt when the browser is resized wheras using pixels it will not.
Which one you choose really depends on the look and feel that you are trying to achieve.
it all depends of what kind of web you plannning to do.
Many web pages use a container with a fixed width on pixels (like 960px). then it's extremely easy if you have a well-made predesign on photoshop, illustrator, indesign, etc to work with pixels. These webs though doesn't work well outside PC screens as if you have a window width smaller than the container the content won't be show unless scrolling horizontally.
Now, if you want your content to adjust to any horizontal width you should use % but imo it is much difficult and you need a clear idea what you want to show on each possible width before starting working.
If you decide to go for a "responsive" design... the work will be harder. I recomend you to use something like:
#media screen and (min-width:600px) {}
#media screen and (min-width:800px) {}
#media screen and (min-width:1024px) {}
#media screen and (min-width:1524px) {}
in your CSS to tweek your classes wahtever necesary for each width (or platform). (there's also many other usefull #medias