CSS: Using different width depending on screen resulution
Question
I have following structure of an HTML document:
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div>
</body>
Is it possible to define different width for the main , left , center and right depending on the screen resulation. For example if the screen resulution is 1280 or higher, main width should be 1140px. If it is 1280 or lower, the width should 960px? Thanks.
PS. I understand we can define the width in %, but I am interested to know if we can define 2 different fixed widths.
4 answers
solution1
3 ACCPTED 2012-01-10 09:44:24
Using only CSS, you can use media queries. Here's the spec , and some examples . Note that not all browsers support this feature.
solution2
1 2012-01-10 09:43:25
Use JavaScript for this. Jquery can can give better syntax. Use screen.width to get the width of user screen and then resize your content accordingly.
solution3
1 2012-01-10 09:44:59
this is the javascript you can use to check the screen width and height.
<script type="text/javascript">
document.write(screen.width+'x'+screen.height);
</script>
reference.. http://andylangton.co.uk/articles/javascript/browser-screen-resolution/
solution4
1 2012-01-10 09:45:41
this can be achieved using javascript:
<script language="javascript">
if ((screen.width>=1024) && (screen.height>=768)) {
alert('High resolution');
} else {
alert('Low resolution');
}
</script>
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.