Question

美好的一天。如何设置我的CSS，每次重新调整浏览器大小时，页面上的内容都会自动重新调整大小。

Answer 1

使用 %代替px。你也可以使用javascript

Answer 2

我猜你正在寻找的是一个响应式框架。我建议您使用现有的Foundation 3或Twitter Bootstrap。它们还提供更多响应，如预先设置的按钮，手风琴菜单，下拉菜单等等。

Answer 3

这里是示例代码..看看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>Strawberries</TITLE>
    <SCRIPT TYPE="text/javascript">
        <!--
        function image(url, width, height) {
            return('<IMG SRC="' + url + '"' +
                ' WIDTH=' + width +
                ' HEIGHT=' + height + '>');
        }
        function strawberry1(width) {
            return(image("images/Strawberry1.gif", width, Math.round(width*1.323)));
        }

        function strawberry2(width) {
            return(image("images/Strawberry2.gif", width, Math.round(width*1.155)));
        }
        // -->
    </SCRIPT>
    <SCRIPT TYPE="text/javascript">
        <!--
        var imageWidth = window.innerWidth/4;
        var fontSize = Math.min(7, Math.round(window.innerWidth/100));
        document.writeln('<TABLE>\n' +' <TR><TD>' + strawberry1(imageWidth) + '\n' +'<TH><FONT SIZE=' + fontSize + '>\n' +'"Doubtless God <I>could</I> have made\n' +'a better berry, but doubtless He\n' +'never did."</FONT>\n'+'<TD>' + strawberry2(imageWidth) + '\n' +'</TABLE>');
        // -->
    </SCRIPT>
    </HEAD>
<BODY>    
<HR>

Strawberries are my favorite garden crop; a fresh ...
</BODY>
</HTML>

调整页面后，CSS会自动重新调整页面大小

3 个答案: