Html 如何将网页缩小到任意大小的屏幕-我可以'；别告诉我什么'；我做错了_Html_Css

Html 如何将网页缩小到任意大小的屏幕-我可以'；别告诉我什么'；我做错了

html css

Html 如何将网页缩小到任意大小的屏幕-我可以'；别告诉我什么'；我做错了,html,css,Html,Css,在我大学的一节课上学习了一点网络开发之后，我决定自己试一试，制作自己的网页。我想把它当作一份虚拟简历。我已经设置了它的视觉效果和样式，它在我的笔记本电脑屏幕上看起来不错，但是它不能适应屏幕大小。我看过其他类似的问题，并尝试实现他们的想法（例如将包装器div的宽度和高度设置为100%），但没有任何效果。谁能告诉我哪里出了问题。我会提供一个图像，它应该是什么样子的情况下，你的屏幕可能会更大或更小。我的HTML：我在正文中添加了背景大小属性，将其设置为百分比，并修改了字体大小以使用vw而不是像素或

在我大学的一节课上学习了一点网络开发之后，我决定自己试一试，制作自己的网页。我想把它当作一份虚拟简历。我已经设置了它的视觉效果和样式，它在我的笔记本电脑屏幕上看起来不错，但是它不能适应屏幕大小。我看过其他类似的问题，并尝试实现他们的想法（例如将包装器div的宽度和高度设置为100%），但没有任何效果。谁能告诉我哪里出了问题。我会提供一个图像，它应该是什么样子的情况下，你的屏幕可能会更大或更小。我的HTML：

我在正文中添加了背景大小属性，将其设置为百分比，并修改了字体大小以使用vw而不是像素或百分比，发现它更适合浏览器大小。现在我只需要防止它们四处移动…

你身上的最小宽度为900px

min width:900px这样整个页面的宽度永远不会小于900px。您还有宽度：900pxwel消息
元素上的code>。如果你想让事情适应/响应，你必须使用百分比而不是px值。你似乎包含了引导，但实际上没有正确使用它。访问getbootstrap.com并阅读文档。另外，这个类：body#wrapper永远不会应用于任何东西。你的wrapper div需要在body中，选择器需要一个空格：body#wrapper所以我改变了css使用百分比而不是像素，但是现在最小化页面只会将所有内容压缩在一起（这是我所期望的）。即使将包装纸放入正文中，整个页面也不会同时收缩。我希望整个页面缩小/放大为一个单元，并调整窗口大小。我该怎么做@EdmundReed@W.Scott还有什么建议吗
<!Doctype html>
   <html>
<head> 
    <title>Jordyn N. Smith</title>
    <!--JQuery Library-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- My CSS stylesheet -->
    <link rel="stylesheet" href="stylesheet.css">
    <!-- Google fonts -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Marck+Script|Poiret+One">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--Javascript file functionality -->
    <script type=text/javascript src="index.js"></script>
</head>
<!--Angular functionality-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="myCntrl.js"></script>
<div id=wrapper>
    <body onload="onload()">
        <!--Info Drawer-->
        <div id="infoDrawer" class="drawer" ng-controller="myCntrl" ng-app="myApp">
            <span class="drawerFont" id=information>{{Information}}</span>
            <!--Side navbar-->
            <div id="mySidenav" class="sidenav col-lg-3">
                <a id=aboutMe class="menu-btn abt" ng-click="aboutMe()">About Me</a>
                <a id=skills class="menu-btn skill" >Skills</a>
                <a id=exp class="menu-btn exp" >Experience</a>           
                <a id=award class="menu-btn award" >Awards/Honors</a>
                <a id=contact class="menu-btn contact" ng-click="contacts()">Contacts</a>
                <a id=dlResume class="menu-btn dl" href="Resources/Resume-lastupdate1:31:17.docx.pdf" download>Download Resume</a>     
            </div>
        </div>
        <!--Name and message-->
        <div class="col-lg-9 message">
            <div class="name">Jordyn Niara Smith</div>
            <div class="wel-message">Welcome to my page. Take a look around.</div>
        </div>
    </body>
</div>

/*Background image styling*/
body{
background-image: url(Resources/FaceQ.jpg);
background-repeat: no-repeat; /*don't repeat image*/
background-position: center top; /*position image in center from top*/
background-color: black !important; /*override default color value w/ image*/
/*height: 100%; fix height of page*/
/*position: fixed;*/
overflow-x: scroll;
overflow-y: scroll;
padding: 0;
margin: 0;
 min-width:900px;
min-height: 450px;
}

body#wrapper{
width:100%;
height: 100%;
}


/*Name and welcome message div styling */
div.name{
color:white; 
/*    text-align: center; */
font-size: 7em;
font-weight: bold;
font-variant: small-caps;
font-family: 'Marck Script', cursive; /*googl font*/
text-shadow: 4px 4px 4px black;
width: 913px;
}
div.wel-message{
color: white;
text-align: center;
font-variant: small-caps;
font-size: 2em;
font-family: 'Poiret One', cursive;
text-shadow: 2px 2px 2px black;
margin-top: 0px;
width: 900px;
}
div.message{
/*keeps message fixed to center of screen*/
position: fixed;
/*
height: 200px;
width: 994px;
*/
height: 30%;
width: 90%;
margin: -100px 0 0 -200px;
top: 375px;
left: 458px;
}

/*nav bar styling*/
body div.col-lg-3{
padding: 0;
width: 278px;
height: auto;
position: fixed;
z-index: -1; /*position behind splash message*/
top: 200px; /*set position from top*/
left: 0;/*set position from left*/
}
div.sidenav {
height: 330px; /* 100% Full-height */
width: 278px; /* 0 width - change this with JavaScript */
background-color: transparent;
overflow-x: hidden; /* Disable horizontal scroll */
}

a.menu-btn{
padding: 8px 8px 8px 32px;/*spaces out buttons*/
font-family: 'Poiret One', cursive; /*google font*/
font-size: 2em;
width: 100%;
float:left;
}

#aboutMe{
color:red;
} 
/*change color on hover */
a.abt:hover{
color:white !important;
background-color: red;
text-decoration:none;
}

#skills{
color:dodgerblue;
float: none;
padding-right: 70%;
}
a.skill:hover{
color:white !important;
background-color: dodgerblue;
text-decoration:none;
}

#exp{
color:greenyellow
}
a.exp:hover{
color:white !important;
background-color: greenyellow;
text-decoration:none;
}

#contact{
color:yellow;
}
a.contact:hover{
color:white !important;
background-color: yellow;
text-decoration:none;
}

#dlResume{
color: mediumpurple;
}
a.dl:hover{
color:white !important;
background-color:mediumpurple;
text-decoration:none;
}

#award{
color:darkorange;
}
a.award:hover{
color:white !important;
background-color: darkorange;
text-decoration:none;
}

/* The info drawer */
.drawer {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
opacity: .9;
top: 0;
right: 0;
background-color:#111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.drawerFont{
/*font styling*/
font-family: 'Poiret One', cursive; /*google font*/
color: white;
z-index: 1;
font-size: 4em;
}