2017-02-23 10 views
0

2つのWebページを作成して、応答性の高いWebページと非応答性のWebページの違いを確認しました。 CSSファイルに幅と余白の値を与えました。応答性の高いウェブページと非応答性のウェブページについて

両方のページが単独で応答する動作をします。

これはresonsive挙動を示すべきではないように私はこれで何をすべき私の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; 
} 

です。 つまり、画面サイズを小さくするとページが縮小しないようにします。 あなたが

この私の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> 
+0

私は実際に画面の幅にサイズを変更する1ページが欲しくないと困惑... – Option

+0

私は2ページを作成しました。私は違いを知りたい。どんなパラメータが反応するのか。 – Shambhu

答えて

0

あなたは固定値ではなくパーセントに幅を設定する必要があります。この方法では、ページはウィンドウや画面のサイズに関係なく同じサイズになります。

例:width: 1000px;width: 1000em;又はwidth: 1000rem;ないwidth: 100%;又はwidth: 100vw;

+0

数字の後に接尾辞を付けないことを意味します。右? @TheWhiteAfrican – Shambhu

+0

申し訳ありませんが、すべてのオプションを試しましたが、どれも変更されていません。 – Shambhu

+0

あなたは私のためにあなたのhtmlも提供する必要があります。 –

関連する問題