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/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm currently making my website responsive and making sure it looks good on mobile/tablets. While doing this I discovered that my fixed navigation bar, with a width set to 100vw, don't cover the width of the page if I pinch-zoom out (a friend also informed me that the navbar didn't cover the width of his phone screen even before he zoomed out).
Before I zoom out:
After zooming out
I've tried finding a solution online but came up empty handed. I also tried changing my navbar from 100vw to 100% but the problem still stands. How could I go about fixing this?
Your width of the navbar is set at 100vw, which means 100% of the viewport is covered which is exactly your case because the navbar covers the whole screen before pinching it out.
Try setting your navbar width to 100% instead of 100vw.
Also, there is an issue with your image sizing which is why you are actually able to pinch out in the first place.
So correct your image dimensions or change your navbar width to 100%. Both should work.
Correcting the image dimensions is preferable.
If you are using something like Bootstrap, you don't need to add the width in the first place.
Please share the code if further clarification is needed.
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 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
Currently working on a mobile version of a website. I have this:
body {
background-image : url("my_image.png");
background-repeat : no-repeat;
background-size: 100%;
}
The background image fills the whole device screen. Question. What size in px (width) will be best for smartphones? Currently thinking to go with a width for the background image of 640px. Is this ok? Any suggestion please?
Using background-size: cover or contain is usually the best way to go.
Big backgrounds could get cropped, though, so you could set background-position or a different background for different screen sizes with media queries, but the above usually works fine.
background-size properties:
cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image.
contain
Scale the image to the largest size such that both its width and its height can fit inside the content area.
Source
640px is the width of an iPhone, so it's one of the smallest widths. A Galaxy Note 3 for example has a width of 1080px. If you want to use an absolute image size, I would suggest to use a bigger one.
However best practice in my opinion would be to use a background image that stretches itself to match the screensize, like described in Sajad's answer.
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
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.