发表新帖
发表新帖

How to implement a web page that scales when the browser window is resized?

后端 未结
关注
11 796
伪装坚强ぢ
伪装坚强ぢ 2020-12-29 15:42

How to implement a web page that scales when the browser window is resized?

I can lay out the elements of the page using either a table or CSS float sections, but i

相关标签:
11条回答
  • 北海茫月
    2020-12-29 16:01

    instead of using in css say "width: 200px", use stuff like "width: 50%"

    This makes it use 50% of whatever it's in, so in the case of:

    <body>
 <div style="width:50%">
  <!--some stuff-->
 </div>
</body>

    The div will now always take up half the window horizontaly.

    0 讨论(0)
  • 耶瑟儿～
    2020-12-29 16:03

    It really depends on the web page you are implementing. As a general rule you're going to want 100% CSS. When sizing elements that will contain text remember to gravitate towards text oriented sizes such as em, ex, and not px.

    Floats are dangerous if you're new to CSS. I'm not new and they are still somewhat baffling to me. Avoid them where possible. Normally, you just need to modify the display property of the div or element you're working on anyway.

    If you do all of this and scour the web where you have additional difficulties you'll not only have pages that resize when the browser does so, but also pages that can be zoomed in and out by resizing text. Basically, do it right and the design is unbreakable. I've seen it done on complex layouts but it is a lot of work, as much effort as programming the web page in certain instances.

    I'm not sure who you're doing this site for (fun, profit, both) but I'd recommend you think long and hard about how you balance out the CSS purity with a few hacks here and there to help increase your efficiency. Does your web site have a business need to be 100% accessible? No? Then screw it. Do what you need to do to make your money first, then go hog wild with your passion and do anything extra you have time for.

    0 讨论(0)
  • 情书的邮戳
    2020-12-29 16:12

    Yep sound like you want to look at a fluid CSS layout. For resources on this, just google fluid CSS layout, should give you a whole lot of things to check. Also have a look at this previous question for some good pointers.

    0 讨论(0)
  • 误落风尘
    2020-12-29 16:13

    Something else to consider is that JavaScript won't update continuously while the window is being resized, so there will be a noticeable delay/choppiness. With a fluid CSS layout, screen elements will update almost instantly for a seamless transition.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-29 16:15

    < body onresize="resizeWindow()" onload="resizeWindow()" > PAGE < /body > 

        /**** Page Rescaling Function ****/

    function resizeWindow() 
    {
        var windowHeight = getWindowHeight();
        var windowWidth = getWindowWidth();

        document.getElementById("content").style.height = (windowHeight - 4) + "px";
    }

    function getWindowHeight() 
    {
        var windowHeight=0;
        if (typeof(window.innerHeight)=='number') 
        {
            windowHeight = window.innerHeight;
        }
        else {
            if (document.documentElement && document.documentElement.clientHeight) 
            {
                windowHeight = document.documentElement.clientHeight;
            }
            else 
            {
                if (document.body && document.body.clientHeight) 
                {
                    windowHeight = document.body.clientHeight;
                }
            }
        }
        return windowHeight;
    }

    The solution I'm currently working on needs a few changes as to width otherwise height works fine as of so far ^^

    -Ozaki

    0 讨论(0)
 看不清?
提交回复
热议问题