How can I scale a web page width (in pixels) to any screen size?
Question
I am attempting to create website with a fixed width (970 px) and would like to ensure that it is adjusted to any potential user screen size, but the browser continues to display it in addition to margins created by my overall screen width.
4 answers
solution1
3 2011-05-27 23:57:12
If you are trying to make your page span 100% of the width then review this article: Liquid Layout
If you are trying to center your fixed width content on any page width simply use:
margin: 0px auto;
solution2
2 2011-05-28 00:16:25
It's not a liquid-layout that you're after, but an 'elastic' layout, with an 'auto-stretch' script attached.
There are a few steps to getting this to work:
- Create your layout using ems for dimensions (instead of pixel dimensions). This has the effect of making the layout 'scalable' while keeping its proportions correct.
Apply a scaling value to your
<body>element as a percentage. This default setting is useful, because it sets 1em equal to 10px in nearly all browsers:body {font-size:62.5%;}This would mean your layout would have a width of
97em.- Use javascript to detect the width of the user's page, and adjust the scaling value on the body to change the 'zoom' to fit the page. You would want this to run at least once, when the page is loaded, and possibly whenever the browser is resized, also.
Here's a good starting point for elastic layouts: http://www.alistapart.com/articles/elastic
solution3
1 2011-05-27 23:45:06
You shouldn't set the width. The contents of the page will expand to fill the entire screen by default.
If you need to find the actual width of an element, you can always find that out. If you're using jQuery, it's
var width = $("#my-element").width()
solution4
0 2011-05-27 23:52:59
If understand what you're getting at, it sounds like you set up your margins incorrectly. to center your content, you'll want your code to look something like this: http://jsbin.com/uyolo4/4/edit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.