发表新帖
发表新帖

Why use percentage value for div's width in CSS?

前端 未结
关注
8 1853
无人及你
无人及你 2021-02-13 11:09

I am reading articles about css. I found out that many of writers suggest to use % value for div\'s width or height.

I am using pixels all the time.

Why should I

相关标签:
8条回答
  • 旧时难觅i
    2021-02-13 11:35

    All in all, if you use images on your site, using percent for main contianer may not be the best approach. In that case, you'd want to use pixels.

    Advice: Use Pixels for main contianer and percent for content.

    0 讨论(0)
  • 鱼传尺愫
    2021-02-13 11:38

    Save the following html to a file and open it with your web browser. Now change the size of the web browser window, notice the percent will expand and contract and the pixels don't.

    <!DOCTYPE html>
<html>
<head>
<title>Pixels and Percents</title>
<style>
html,body {
    margin:0;
    width:100%;
    height:100%;
    background:blue;
}

.pixels {
width:100px;
height:20px;
background:green;
}

.percent {
width:50%;
height:50%;
background:red;
}

</style>
<head>
<body>
<div class="pixels">
PIXELS
</div>
<div class="percent">
PERCENT
</div>
</body>
</html>
    0 讨论(0)
  • 醉酒成梦
    2021-02-13 11:42

    the benefit of using % is than you can use all 100% of user interface, and give best experience no mattet

    0 讨论(0)
  • 情深已故
    2021-02-13 11:44

    Although certainly not the only reason, use percentage to take up a certain amount of space of something you don't initially know the container parents width of.

    For example, let's say I want my div element to always occupy at least 50% of the viewers browser window, I could write that as:

    <div style="width:50%">
    This will take up 50% of the width
</div>

    Doing this the fixed way by using "px" will require you know the resolution of the browser if you want at least 50% width taken up. You could do this using JavaScript, but CSS is much more easier and faster.

    Some other Examples using tables, divs, and animations: http://jsfiddle.net/BLQp7/1/

    0 讨论(0)
  • 长发绾君心
    2021-02-13 11:49

    I, personally, dislike websites which have a % width for the main content area because of the inconsistency. It's best to use a pixel width of about 1000 pixels, maybe a bit less, for the whole website so that it will work for all resolutions.

    As for elements inside the main content area, I tend to use percent widths because I don't really want to both with calculating the exact pixel values. The result is set in stone anyway because the thing that it's a percentage of is constant, as opposed to the monitor's resolution, which varies between users.

    To sum it up: only use percentages when every user is going to get the same result because of a parent element having a fixed (pixel) width. Otherwise there will be inconsistencies in your design, making it so that you can't use any flashy images and the website may look ugly to users with giant / tiny monitors. If you are going to use percentage widths you simply have to test the website with different resolutions!

    0 讨论(0)
  • 走了就别回头了
    2021-02-13 11:49

    I find web sites that don't fit the screen, either leaving white space (which can be considerable) round the edge of the content, or falling off the side with a scrollbar (or, worse, falling off the side withOUT a scrollber!) intensely annoying.

    I write my pages to fit the screen, regardless of how large that screen is.

    0 讨论(0)
 看不清?
提交回复
热议问题