Question

基本上，当网站缩放时，我希望body标签内的所有内容（包括边框）与svg文件的方式类似。无论分辨率如何，正文内容都应保留在页面的中心。这有可能吗？

CSS：

/* 
 ------------------------------------------------------------------------------------------------------------
|   Written and designed by -redacted- for -redacted-, trying to be as low-impact and minimal as possible.  |
|   Some stuff WILL NOT work in older IE browsers - impossible to develop for anyway so it hardly matters.   |
 ------------------------------------------------------------------------------------------------------------
*/

/* Makes the page wrap to the center to ensure the house style is kept to and content is actually viewable. */
#page-wrap {
     width: 900px;
     margin: 0 auto;
}

html {
    background-color: white;
    resize: both;
    overflow: auto;
}       

body {
    position: absolute;
    margin: 0;
    top: 30%;
    left: 25%;
    right: 25%;
    
    transform: translate(-50%, -50%)
    border-color: white;
    color: white;
    font-family: Arial;
    background-color:rgba(0, 0, 0, 0.5);
    padding:3px 30px 30px 30px;
    border-style: solid;
    border-width: 2px;
    text-align:center;
    
    /* CSS for the fade-in effect */
    opacity: 1;
    transition: 1s opacity;   
}
h1 {
    margin-top: 20px;
    margin-bottom: 5px;
    font-family: Porter Bold;
    font-size: 75px
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #dce3ef;
}

li {
    width: 105%;
    align-content: center
}

li a {
    color: black;
    font-family: Porter Bold;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    width: 23.8%;
    float: left;
}

/* 
All of the a:hover CSS is cool webkit stuff for making glowing edges around things
          I've implemented it for glowing fancy looking hyperlinks. 
*/
li a:hover {
    background-color: #8b8f96;
    text-shadow: -1px 1px 20px #ffc, 1px -1px 20px #fff;

    -webkit-transition: text-shadow 250ms linear 0s;
    -moz-transition: text-shadow 250ms linear 0s;
    -o-transition: text-shadow 250ms linear 0s;
    transition: text-shadow 250ms linear 0s;
}

h3 a:hover {
    color:darkorange;
    text-shadow: -1px 1px 20px #ffc, 1px -1px 20px #fff;

    -webkit-transition: text-shadow 250ms linear 0s;
    -moz-transition: text-shadow 250ms linear 0s;
    -o-transition: text-shadow 250ms linear 0s;
    transition: text-shadow 250ms linear 0s;
}

footer a:link {
    color: orange;
}

footer a:hover {
    color:darkorange;
    text-shadow: -1px 1px 20px #ffc, 1px -1px 20px #fff;

    -webkit-transition: text-shadow 250ms linear 0s;
    -moz-transition: text-shadow 250ms linear 0s;
    -o-transition: text-shadow 250ms linear 0s;
    transition: text-shadow 250ms linear 0s;
}
footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px
}


/* 
        CSS3 Fade-in text because I'm too lazy to implement jQuery, 
and it's more lightweight and multifuctional than any jQuery solution anyway. 
*/

/*  ----------------------------------------------------- Beginning of Fade-in -----------------------------------------------------  */
.fadeintext {
    -webkit-animation: fadein 2s;
    /* Safari, Chrome and Opera > 12.1 */
    
    -moz-animation: fadein 2s;
    /* Firefox < 16 */
    
    -ms-animation: fadein 2s;
    /* Internet Explorer */
    
    -o-animation: fadein 2s;
    /* Opera < 12.1 */
    
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox < 16 */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Opera < 12.1 */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*  ----------------------------------------------------- End of Fade-in -----------------------------------------------------  */

/* Fullscreen non-interactable YouTube CSS to create the video background for the site. */
/*  ----------------------------------------------------- Beginning of YouTube CSS -----------------------------------------------------  */
* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

/*  ----------------------------------------------------- End of YouTube CSS -----------------------------------------------------  */


/* Importing Font .ttf files to be used in the site (used for h1 and h3). */
@font-face {
    font-family:"Porter Bold";
    src: url("Porter Bold.ttf");
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<div id="page-wrap">
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <title> -redacted- - Basic Website</title>
    </head>
    <body> 
        <div class="fadeintext">
        <h1 align=center>Basic Website</h1>
        <h3 align=center><em><strong>Hello world!</strong></em> This webpage is an ongoing project which is part of <a href=""><font color="orange">-redacted-</font></a>.</h3>
       
        <ul>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="aboutme.html">About Me</a></li>
            <li><a href="images.html">Images</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
         
        <div class="fadeintext" align=center>
            <p><strong>This is a test for the YouTube background pure CSS method I've been developing.</strong></p>
            <p>If it works, a video should be playing in the background of this webpage, the video itself is also forced to be played at 1080p.</p>
            <p>Please keep in the mind that the video background is a direct stream from YouTube, so codec issues and corruption is nothing to do with the code. Refresh the page if quality does not improve.</p>
        </div>
            
    <footer align=center>
        <p align=center>-----------------------------------------------------------------------------------------</p>
        <em>This website was made by <a href="" target="_top">-redacted-</a> for -redacted-.</em>
    </div>
       
    <!-- This HTML code creates the video background from a YouTube Livestream, and the script inside mutes the audio of the livestream when the page is loaded.-->
    <div class="video-background">
            <div class="video-foreground">
                <iframe id="player" src="https://www.youtube.com/embed/UGPuEDyAsU8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&enablejsapi=1&=HD1080" frameborder="0" allowfullscreen></iframe>
                <script>
      // This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // This function creates an <iframe> (and YouTube player)
      // after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          playerVars: {
                    autoplay: 1,
                    loop: 1,
                    controls: 0,
                    showinfo: 0,
                    autohide: 1,
                    modestbranding: 1,
                    vq: 'hd1080'},
          videoId: 'UGPuEDyAsU8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
      }

      var done = false;
      function onPlayerStateChange(event) {
        
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
                
            </div>
    </div>
      
    </footer>
    </body>
</html>
</div>

Answer 1

您将div包装器放在body标签之外，这不是它的工作原理。你的所有div都需要在你的身体标签内。请尝试以下

CSS

#page-wrap {
     width: 80%
     margin: 0 auto;
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <title> -redacted- - Basic Website</title>
    </head>
    <body> 
      <div id="page-wrap">
        <div class="fadeintext">
        <h1 align=center>Basic Website</h1>
        <h3 align=center><em><strong>Hello world!</strong></em> This webpage is an ongoing project which is part of <a href=""><font color="orange">-redacted-</font></a>.</h3>

        <ul>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="aboutme.html">About Me</a></li>
            <li><a href="images.html">Images</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <div class="fadeintext" align=center>
            <p><strong>This is a test for the YouTube background pure CSS method I've been developing.</strong></p>
            <p>If it works, a video should be playing in the background of this webpage, the video itself is also forced to be played at 1080p.</p>
            <p>Please keep in the mind that the video background is a direct stream from YouTube, so codec issues and corruption is nothing to do with the code. Refresh the page if quality does not improve.</p>
        </div>
   </div>         
    <footer align=center>
        <p align=center>-----------------------------------------------------------------------------------------</p>
        <em>This website was made by <a href="" target="_top">-redacted-</a> for -redacted-.</em>
    </div>

    <!-- This HTML code creates the video background from a YouTube Livestream, and the script inside mutes the audio of the livestream when the page is loaded.-->
    <div class="video-background">
            <div class="video-foreground">
                <iframe id="player" src="https://www.youtube.com/embed/UGPuEDyAsU8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&enablejsapi=1&=HD1080" frameborder="0" allowfullscreen></iframe>
                <script>
      // This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // This function creates an <iframe> (and YouTube player)
      // after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          playerVars: {
                    autoplay: 1,
                    loop: 1,
                    controls: 0,
                    showinfo: 0,
                    autohide: 1,
                    modestbranding: 1,
                    vq: 'hd1080'},
          videoId: 'UGPuEDyAsU8',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
      }

      var done = false;
      function onPlayerStateChange(event) {

      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

            </div>
    </div>

    </footer>
    </body>
</html>

here

我所做的就是将div包装器放在body标签内，并将包装器的宽度更改为视图宽度的80％（在这种情况下为父容器，主体）。

对于响应式设计，我建议使用一个框架，因为它使工作变得更容易。尝试调查Bootstrap或Zurb Foundation。

如何使网站的body标签内的内容完全可扩展？

1 个答案: