如何使这个 html 响应

Question

我是网站开发的新手。 我试图响应此代码..但它不起作用。 我只是想让这个页面响应。 我正在尝试让这个网页在手机、平板电脑、笔记本电脑上做出响应，这是我的 html 代码

 body{background-color:black} .main{ margin:0 auto; padding:0px;background-color:white;font-family:Arial,Helentica;font-size:12px; color:#000;width:935px;background-color:white} .header{width:814px;height:123px;padding:65px 0px 0px 120px;font-size:12px; color:black;font-family:Arial;background-color:white} .logo1{float:left;padding-right:50px;} .logo2{float:right;padding-right:50px} .text1{float:left;text-align:center;font-size:20px;color:brown} .navbar{float:left;padding:0px;margin:0px;background-color:gray;height:30px;position:absolute;width:934px} .navbar ul{ display:inline; list-style:none;} .navbar li{float:left;text-align:center;font:normal bold 12px/2.5em Arial,verdana;text-decoration:none;} .navbar ul li a{ padding:0 20px 0 20px; border-left:1px solid black;text-decoration:none;color:white;display:block-line;height:50px;} .navbar li:hover, a:hover {background-color:black;} .navbar li ul {display: none; height: auto;margin: 0;padding:0} .navbar li ul {position:absolute;width:100%;left:0} .navbar li:hover ul {display: block} .navbar li ul li {background-color:gray;border:1px solid black} .navbar li ul li a:hover{background-color:black;} #mid-wraper{width:934px; margin:0 auto; padding:0px;} #mid-wraper-inner{width:934px; float:left; background-color:white} #left-wraper{width:296px; float:left; bacground-color:white} #left-wraper-top{width:296px; background:white; padding:14px 0px 12px 0px; float:left;} #video{width:270px; float:left; padding:1px 0px 10px 15px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px;background-color:white} .link{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:right;} .link:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:right;} .link2{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#bc4105; text-decoration:none; text-align:right;} .link2:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#bc4105; text-decoration:none; text-align:right;} #right-wraper{width:596px; float:left; padding:15px 0px 0px 25px;} .right-part{width:596px; float:left;} #foter{width:934px; margin:0 auto; padding:0px; color:#999999; } #foter-inner{width:934px; float:left; padding:10px 0px;} .footer-link{color:#999999; text-decoration:none; padding:0px 5px;} .footer-link:hover{color:#999999; text-decoration:none; padding:0px 5px;} This is my html i have bootstrap and i tried a lot but its getting messy please help

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> @media only screen and (max-width: 1024px) { body { background-color:black; } } @media only screen and (max-width: 768px) { body { background-color:black; } } </style> </head> <body> <div class="main"> <div class="header"> <div class="logo1"><img src="images/logo1.jpg" alt="" height="100" width="100"></div> <div class="text1"><strong>AGNIHOTRI COLLEGE OF ENGINEERING,<br>WARDHA</strong> <br><div style="float:left;text-align:center;font-size:12px;color:brown;padding-left:50px">(Near Bypass Highway,Nagthana Road Sindi(Meghe))<br>Email:ace@agnihotri.org <br>Phone:07152-250152 </div> </div> <div class="logo2"><img src="images/12.png" alt="" height="100" width="100"></div> </div> <div class="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="governance.html">Governance</a></li> <li><a href="campus.html">Campus</a></li> <li><a href="#">Department</a> <ul> <li><a href="#">Basic Science</a></li> <li><a href="#">Machanical Engineering</a></li> <li><a href="#">Civil Engineering</a></li> <li><a href="comp.html">Computer science & Engineering</a></li> <li><a href="#">Electronics & Communication Engineering</a></li> <li><a href="#">M.Tech(computer science & Engg.)</a></li> <li><a href="#">M.Tech(Electronics)</a></li> </ul> </li> <li><a href="addmission.html">Addmission</a></li> <li><a href="facility.html">Facility</a></li> <li><a href="download.html">Download</a></li> <li><a href="place.html">Placement</a></li> <li><a href="gallary.html">Gallary</a></li> </ul> </div> <div class="middle"> <div class="mid-wrapper"> <img src="images/3.jpg" width="934px" height="250px"</div> </div> <div id="mid-wraper"> <div id="mid-wraper-inner"> <div id="left-wraper"> <div id="left-wraper-top"> <div style="margin: 0px;width: 256px; float: left; display: block;background-color:white;padding-left:20px"> <h2 style="background-color:brown;text-align:center;color:white">News</h2> <marquee direction="up"><b><p style="text-align:center">ALL THE BEST STUDENTS <br>FOR UNIVERSITY EXAM:</p><b><br> <p style="color:blue;text-align:center">University Summer 2018<br> Exam Timetables<br> Are Available In<br> The Download Section: </marquee></p> </div> </div> <div id="video"> <h2 style="background-color:brown;text-align:center;color:white">Video</h2> <video controls autoplay width="300px" height="100px" > <source src="images/college.mp4" type="video/mp4"> </video> </div> <div style="padding-left:30px"> <img src="images/img1.jpg" alt="" width="250px" height="150px" ></div> </div> <div id="right-wraper"> <div class="right-part"> <h2 style="background-color:brown;text-align:center;color:white">Welcome to Agnihotri College Of Engineering</h2> <div style="padding: 10px 0px; width: 596px; float: left;background-color:white"> In this angnihotri collge of engineering is a very big collge..they have many facilities for student and teacher staff..so please check my wesite to many student..i am hope so very nice collge.. <br><br> <div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Vision</div> <br> To develop globally competent, efficient learner and community oriented model of Engineering education. <br><br> <div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Misson</div> <br> To create value added, competent and research oriented trained Engineering professionals for sustainable development of the society. <br> <br> <br> <div class="right-part" style="padding: 10px 0px;"> <div style="width: 290px; float: left;"> <h2 style="background-color:brown;color:white;text-align:center">President's Message</h2> <div style="padding-left:90px"><img src="images/presi.gif" alt="" width="100px" height="70px"></div> <br> <div style="border-right: 1px solid rgb(153, 153, 153); width: 289px; float: left; padding-right: 10px; margin-top: 10px;"> I feel proud and happy to introduce to you ACE and welcome you to this prestigious institution, ACE is managing unprecedented growth through proliferation of a variety of knowledge institutes as part <br> <a href="governance.html" class="link2" style="float: right;">read more</a></div> </div> <div style="width: 270px; float: right; padding-right: 10px;"> <h2 style="background-color:brown;text-align:center;color:white">Scretory's Message</span></h2> <div style="padding-left:90px"><img src="images/secre.gif" alt="" width="100px" height="70px"></div> <br> <div style="width: 269px; float: left; padding-right: 10px; margin-top: 10px;"> Our vision is to develop a strong, enthusiastic manpower from Engineering Stream with an excellent academic standing of a global level. The globalization has created many challenges of Competition, training and placem <br> <a href="governance.html" class="link2" style="float: right;">read more</a></div> </div> <div style="width: 500px; float: left;"> <h2 style="background-color:brown;color:white;text-align:center">Principle's Message</h2> <div style="border-right: 1px solid rgb(153, 153, 153); width: 550px; float: left; padding-right: 10px; margin-top: 10px;"> Education is an essential human virtue, necessity for society and basis of good life. Addison says-"What sculpture is to a block of marble, education is to the soul". <a href="governance.html" class="link2" style="float: right;">read more</a></div> </div> </div> </div> </div> </div> <div id="foter"> <div id="foter-inner"> <p style="margin: 0px; padding: 0px; width: 550px; float: left; display: block;"><a href="#" class="footer-link">Home</a> <a href="#" class="footer-link">About us</a> <a href="#" class="footer-link">Recent articles</a> <a href="#" class="footer-link">Email</a> <a href="#" class="footer-link">Resources</a> <a href="#" class="footer-link">Links</a></p> <p style="margin: 0px; padding: 0px; width: 200px; float: right; text-align: right; display: block;">&copy; Designed by <a class="footer-link" target="_blank" href="http://www.htmltemplates.net/">htmltemplates.net</a></p> </div> </div> </div> </body> </html>

请有人帮助使此页面响应提前致谢

Answer 1

使用引导网格布局，如容器、col-md、col-xs、col-sm 并在样式中给出宽度：% 不要使用 px

用于引导程序参考

Answer 2

我认为，在这种情况下，最好使用断点向上工作。

例如，在移动设备上您希望宽度为 100%。 不需要媒体查询，从基本行为开始。

div.item {
    width: 100%; // div is 100% by default, so actually not needed
    background-color: #000;
}

对于平板电脑及更高版本，您可能需要添加例外：宽度 50%、浮动和灰色背景：

@media(min-width: 768px) {
    // tablet
    .item {
        width: 50%;
        float: left;
        background: #ccc;
    }
}

等等...

@media(min-width: 992px) {
    .item {
        // ....
    }
}

@media(min-width: 1200px) {
    // desktop
    .item {
        // ....
    }
}

Answer 3

将 div 标签< div class="maintag">放在 body 标签下方并将其关闭在 body 标签上方，例如：

. . .

然后使用 css 使用 .maintag{margin-left="10px";margin-right="10px"}