关于响应式和非响应式网页

我已经创建了两个网页，以查看响应式和非响应式网页之间的差异。我已经给出了CSS文件中的宽度和边距值。关于响应式和非响应式网页

这两个页面本身都采取其响应行为。

这是我的CSS文件

@CHARSET "ISO-8859-1"; 
body { 
    background-color: #999999; 

} 
.signUp { 
    background-color: #2F4F4F; 
    margin: 40px auto; 
    border-radius: 5px; 
    max-width: 1000px; 
    box-shadow: 0px 0px 200px 0px #2F4F4F; 
} 
.rowLab { 
    font-size: 20px; 
    padding: 0px 60px 0px 0px; 
} 
.in { 
    width: 400px; 
    position: relative; 
    background-color: #2F4F4F; 
    padding: 5px 10px 5px 5px; 
    font-size: 25px; 
} 
.btn { 
    background-color: gray; 
    color: #2F4F4F; 
    padding: 10px 40px 10px 40px; 
}

我应该在这这样做，它不应该显示resonsive行为。即当我缩小屏幕尺寸时，我希望页面不缩小。谢谢

这是我的html页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
     <title>SignUp</title> 

     <link rel="stylesheet" href="webStyle.css"> 

     <script type="text/javascript"> 
      function contact() { 
       var a=document.getElementById("phone").value; 
       if(a.length!=10){ 
        alert("Check Contact Number !!"); 
       } 
      } 

     </script> 
    </head> 
    <body> 
     <div class="signUp"> 
      <form action="DBinsert" method="get" > 
       <br><br> 
       <h1 style="font-size: 50px; color: #ffffff" align="center">Register Yourself</h1> 
       <br><br><br> 


       <table align="center"> 
        <tr> 
         <td class="rowLab">First Name</td> 
         <td><input class="in" type="text" name="fname" required autocomplete="on"></td> 
        </tr> 
        <tr> 
         <td class="rowLab">Last Name</td> 
         <td><input class="in" type="text" name="sname" required autocomplete="on"></td> 
        </tr> 
        <tr> 
         <td class="rowLab">Username</td> 
         <td><input class="in" type="text" name="uname" required autocomplete="on"></td> 
        </tr> 
        <tr> 
         <td class="rowLab">Password</td> 
         <td><input class="in" type="password" name="pwd" required autocomplete="off"></td> 
        </tr> 
        <tr> 
         <td class="rowLab">Email Id</td> 
         <td><input class="in" type="text" name="email" required autocomplete="on"></td> 
        </tr> 
        <tr> 
         <td class="rowLab">Phone NO.</td> 
         <td><input class="in" type="text" name="phone" id="phone" onblur="contact()" required autocomplete="on"></td> 
        </tr> 
        <tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr> 
        <tr><td></td> 
        <td><input class="btn" type="submit" value="SignUp"></td> 
        </tr> 

        <tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr> 
         <tr><td></td> 
         <td> 

         <%String sc=(String)request.getAttribute("data"); %> 
         <%if(sc!=null) {%> 
         <b><%= sc %></b> 
         <%} %><br><br> 

         </td> 
        </tr> 

       </table> 

      </form> 
     </div> 
    </body> 
</html>

来源

2017-02-23 Shambhu

进出口困惑，你不想要1页，调整屏幕宽度... – Option

我已经创建了两页。我只是想知道不同之处。什么参数使它响应。 – Shambhu

你必须设置宽度为固定值，而不是百分比。这样，无论窗口或屏幕大小如何，页面都将保持相同的大小。

示例：width: 1000px;，width: 1000em;或width: 1000rem;不width: 100%;或width: 100vw;。

来源

2017-02-23 08:46:13

你的意思是设置数字，后面没有后缀。对？ @TheWhiteAfrican – Shambhu

对不起，但我已经尝试了所有的选项，他们都没有改变。 – Shambhu

你需要提供你的html以及我能够帮助你进一步。 –

关于响应式和非响应式网页

回答

相关问题