Screen resolutions and CSS

If I set my screen resolution to 1024 * 768, does that mean my website can be 1024 pixels wide?

If so then why does an image 1024 pixels wide cut off the page?

http://stevenportfolio.ser开发者_如何学编程vehttp.com

If your screen resolution is 1024x768, that means that your screen is 1024 pixels wide. The available space for a web page is probably a little less, since scroll bars and window borders take up some space.

The short answer is no. A screen resolution of 1024 x 768 means that your screen is displaying 1024 pixels horizontally and 768 pixels vertically. When you view your web page, though, you aren't always using 100% of those pixels. For example, the scroll bar in your browser takes up some of those pixels or if the browser is not maximized then you may only have half of the screen.

You should never design a website that relies on the screen being a particular resolution for several reasons:

• Not all your users have the same screen resolution
• Even if you try to find the resolution with JavaScript or some similar hack, it may or may not be reported correctly (plus your website shouldn't require JavaScript to work)
• The browser window may or may not be maximized

Try to come up with a design that is flexible enough to scale for any standard screen size and remember to test your site frequently on different screen sizes, browsers, operating systems, and resolutions. (You can use browsershots.org if you don't have multiple computers handy.)