View Full Version : Using different stylesheets for different resolutions?

04-30-2006, 12:21 AM
Hi, I'm making a website where I want to use a different font size for different screen sizes, or actually rather, different window sizes. As an example, if the window is more than 1000 pixels across I might want to use a really big font size, if it's between 1000 and eg 700 pixels I want a slightly smaller one, and if it's below 700 pixels across I want an even smaller one. Is there any way to put only the size dependent css statements in three separate style sheets and load a different one depening on what size the window is? It doesn't have to change if the user changes the window size after the page has loaded.


Muhammad Haris
04-30-2006, 12:28 AM
Well, There is a way to use in a PHP enviornment but you had to do many things in this condition.

You will have to use function that would detect the resolution of the user computer first and will have to use if and else functions.

I suggest rather then this you should use percentages to detect the font sizes,widths and etc to fit in every type of resolution.

Try like

font-size : 10%;
in your stylesheets.

04-30-2006, 12:50 AM
Nope, percentage on font sizes doesn't seem to change with the window size... at least not in Safari.

But should't it be rather simple to make a javascript in the head that checks the size, and does a document write that imports the relevant style sheet? I just don't know how to do it in practice.

Muhammad Haris
04-30-2006, 01:06 AM
Its late night in here and tommorow i will be able to find you codes for your purpose.

04-30-2006, 01:56 AM
See if this gets you where you want to be (http://www.design-ireland.net/index.php?http%3A//www.design-ireland.net/design/design-12.php)

04-30-2006, 12:39 PM
See if this gets you where you want to be (http://www.design-ireland.net/index.php?http%3A//www.design-ireland.net/design/design-12.php)

Yes, that seems to be exactly what I wanted!

Thank you both for helping!

EDIT: No wait... that was in respect to the screen size, which doesn't necesarily have anything to do with how much window space there is... hmm. How would I modify it to adapt to window size instead?

04-30-2006, 05:17 PM
Let's start with the 3 css pages I used.

small css:

p {
font-size: 80%;
color: #d6f;

medium css:

p {
font-size: 120%;
color: #fc3;

high css:

p {
font-size: 160%;
color: #6cd;

now the page if you don't want it to resize the text if they later resize the window:

<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css" media="screen,projection">
p {
font-family: tahoma, helvectia, sans-serif;
<script language="Javascript">
if (document.documentElement.clientWidth < 900) {
document.write('<link rel=stylesheet type="text/css"

if (document.documentElement.clientWidth >= 900 &&

document.documentElement.clientWidth < 1100) {
document.write('<link rel=stylesheet type="text/css"

if (document.documentElement.clientWidth >= 1100) {
document.write('<link rel=stylesheet type="text/css"


A whole bunch of text for testing.

works in FF, IE6 (strict doctype) and Opera. Other than that Im not sure.

If you want it to resize on resize it requires a function.

If it's buggy maybe move the whole discussion over to the Javascript forum and see what they can do to help you out.

04-30-2006, 06:10 PM
Big thanks! Works perfectly when I adapted it to my purpose.