How to replace text in html automatically when the browser is resized?
Answers
Answer:
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
Explanation:
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;