12-fit-auto.htm

<!DOCTYPE html>
<html>
    <head>
        
        <title>.fitAuto example</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <!-- LIBRARY FILES -->
        <link rel="preload" href="basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="basic/basic.min.css">
        <script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>

        <style>

        /* 
        body {
            margin: 0px !important;
            overflow: hidden !important;
        }
        */

        </style>

        <script>
        
        // VARIABLES            
        let myString = "";
        let myInteger = 0;
        let myFloat = 0.5;

        // First running function.
        window.onload = function() {

            page.fitAuto(1280, 720);

            // GROUP: Centered
            startFlexBox({
                color: "#141414",
            });
                // BOX: Content container
                startBox({
                    width: 1280,
                    height: 720,
                    color: "white",
                });

                    // PUT CONTENT
                    Label(10, 10, {
                        text: "Your content size is always same size (1280x720px)"
                    });
                    that.center();

                endBox();
            endFlexBox();

            page.onResize(pageResized);
            
        };

        const pageResized = function() {

            page.fitAuto(1280, 720);

        };

        </script>

    </head>
    <body>
        
        <!-- HTML content -->
        
    </body>
</html>