Text Resize When Browser Resized

Question

I'm only new to this whole web development thing so I don't have much knowledge.

Basically what I want to do is have fixed positioned text made smaller when the browser window is made smaller. I've had media queries suggested to me but from what I've read (could be wrong though) they relate to the device screen size as opposed to the browser window being resized.

I want to use fixed positioning as I don't want the text to scroll with the rest of the page, but I need the text size to change when the browser window size is decreased. Currently when I resize the browser window some of the text just disappears off the screen. I tried entering % height properties in my CSS style sheet, but that hasn't helped.

So far I've only used CSS and HTML

Any help appreciated

Answer 1

You can use the width of the browser:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).

http://www.w3.org/TR/css3-mediaqueries/ §4.1

Note that this is different than device-width:

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen.

---

Examples

(resize the preview pane back and forth).

• simple
• inclusion of position:fixed content (per the question)

<div class="resize">hello world</div>

@media all and (min-width: 400px) {
    .resize {
        font-size: 14px;
    }
}
@media all and (min-width: 600px) {
    .resize {
        font-size: 32px;
    }
}

---

• See also: http://css-tricks.com/css-media-queries/