ズームアウトの問題を解決する方法

Question

私がズームインしてズームインするとき、ウェブサイトのコンテンツは異なる方向に実行されています。

ウェブサイトのコンテンツを修正するにはどうすればよいですか？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    letter-spacing: -1px; 
 
    font-size: 13px; 
 
    font-family: calibri light; 
 
} 
 

 
.main_body { 
 
    margin-top: 20px; 
 
} 
 

 
.main_container { 
 
    min-width: 303px; 
 
    min-height: 245px; 
 
    border: 1.5px solid; 
 
    border-color: transparent #003DDC#003DDC#0855DD; 
 
    -webkit-border-radius: 7px 7px 0 0; 
 
    -moz-border-radius: 7px 7px 0 0; 
 
    border-radius: 7px 7px 0 0; 
 
} 
 

 
.main_container_one, 
 
.main_container_two { 
 
    -webkit-border-radius: 8px 8px 0 0; 
 
    -moz-border-radius: 8px 8px 0 0; 
 
    border-radius: 8px 8px 0 0; 
 
} 
 

 
.cont_bor { 
 
    border: 1px solid; 
 
} 
 

 
.main_container_one { 
 
    width: 305px; 
 
    height: 246px; 
 
    border-color: transparent #001DA0 #001DA0 #166AEE; 
 
} 
 

 
.main_con { 
 
    width: 307px; 
 
    height: 247px; 
 
    border-color: transparent #00138C#00138C#0831D8; 
 
} 
 

 
.cont_margin { 
 
    margin: auto; 
 
} 
 

 
.cont_border { 
 
    border-top: 0; 
 
    background: #ECE9D8; 
 
    display: table; 
 
} 
 

 
.header { 
 
    width: auto; 
 
    height: 29px; 
 
    -webkit-border-radius: 5px 5px 0 0; 
 
    -moz-border-radius: 5px 5px 0 0; 
 
    border-radius: 5px 5px 0 0; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2B91FF), color-stop(0, #026BFE), color-stop(0.02, #004CE3), color-stop(0.04, #026BFE), color- stop(0.14, #0058E6), color-stop(0.15, #0053E3), color-stop(0.23, #0056EA), color-stop(0.64, #0053E3), color-stop(0.9, #0065FD), color-stop(1, #0042CF), color-stop(1, #0054E5), color-stop(1, #2B91FF), color-stop(1, #0057EE)); 
 
    background-image: -webkit-linear-gradient(bottom, #2B91FF 0%, #026BFE 0%, #004CE3 2%, #026BFE 4%, #0058E6 14%, #0053E3 15%, #0056EA 23%, #0053E3 64%, #0065FD 90%, #0042CF 100%, #0054E5 100%, #2B91FF 100%, #0057EE 100%); 
 
    background-image: -moz-linear-gradient(bottom, #2B91FF 0%, #026BFE 0%, #004CE3 2%, #026BFE 4%, #0058E6 14%, #0053E3 15%, #0056EA 23%, #0053E3 64%, #0065FD 90%, #0042CF 100%, #0054E5 100%, #2B91FF 100%, #0057EE 100%); 
 
    background-image: linear-gradient(to bottom, #2B91FF 0%, #026BFE 0%, #004CE3 2%, #026BFE 4%, #0058E6 14%, #0053E3 15%, #0056EA 23%, #0053E3 64%, #0065FD 90%, #0042CF 100%, #0054E5 100%, #2B91FF 100%, #0057EE 100%); 
 
} 
 

 
.header_caption { 
 
    font: 600 13px Arial; 
 
    text-align: left; 
 
    text-shadow: 1px 1px black; 
 
    color: #FFFFFF; 
 
    padding: 8px 0 0 5px; 
 
    float: left; 
 
} 
 

 
.header_btn, 
 
.button_group { 
 
    float: right; 
 
} 
 

 
.header_btn { 
 
    padding: 3px 2px; 
 
} 
 

 
.help_btn { 
 
    width: 18px; 
 
    padding-right: 4px; 
 
} 
 

 
.sub_container { 
 
    width: 293px; 
 
    padding-top: 8px; 
 
} 
 

 
.row_width { 
 
    width: 400px; 
 
} 
 

 
.select_one { 
 
    width: 49px; 
 
    color: black; 
 
    margin: 1px 0 0px 1px; 
 
    font: 11px Arial; 
 
    height: 12px; 
 
    border: none; 
 
    background-color: #AEC4E8; 
 
} 
 

 
.row_one { 
 
    display: table-caption; 
 
} 
 

 
.rowone_width { 
 
    width: 63px; 
 
} 
 

 
.rowone_font { 
 
    font-size: 12px; 
 
} 
 

 
.row_margin { 
 
    margin-top: 2px; 
 
} 
 

 
.row_display { 
 
    display: inline-block; 
 
} 
 

 
.text_back { 
 
    border: 1px solid #7F9DB9; 
 
    background-color: #ffffff; 
 
} 
 

 
.text_one { 
 
    width: 223px; 
 
    height: 18px; 
 
} 
 

 
.desc_text { 
 
    height: 39px; 
 
    width: 219px; 
 
    margin-top: 1px; 
 
} 
 

 
.col_bor { 
 
    border-color: #7F9DB9; 
 
} 
 

 
.row_pad { 
 
    padding: 2px; 
 
    font-size: 13.5px; 
 
    font-family: calibri light; 
 
} 
 

 
.row_background { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    border-color: #7F9DB9; 
 
    width: 225px; 
 
    background: #FFFFFF url(select.png) no-repeat 206px 0; 
 
} 
 

 
.button_group { 
 
    margin: 10px 2px 0 0; 
 
} 
 

 
.row_height { 
 
    height: 22px; 
 
} 
 

 
.ok_btn, 
 
.cancel_btn { 
 
    width: 73px; 
 
    letter-spacing: 0; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    border-color: #003C74; 
 
} 
 

 
.ok_btn { 
 
    margin: 0 5px 0; 
 
} 
 

 
.button_focus { 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(192, 207, 221, 1)), color-stop(5%, rgba(254, 254, 254, 1)), color-stop(26%, rgba(246, 246, 244, 1)), color-stop(84%, rgba(240, 240, 234, 1)), color-stop(89%, rgba(235, 235, 229, 1)), color-stop(95%, rgba(226, 223, 214, 1)), color-stop(100%, rgba(163, 174, 180, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(192, 207, 221, 1)0%, rgba(254, 254, 254, 1)5%, rgba(246, 246, 244, 1) 26%, rgba(240, 240, 234, 1)84%, rgba(235, 235, 229, 1)89%, rgba(226, 223, 214, 1)95%, rgba(163, 174, 180, 1)100%); 
 
    background: -moz-linear-gradient(top, rgba(192, 207, 221, 1)0%, rgba(254, 254, 254, 1)5%, rgba(246, 246, 244, 1) 26%, rgba(240, 240, 234, 1)84%, rgba(235, 235, 229, 1)89%, rgba(226, 223, 214, 1)95%, rgba(163, 174, 180, 1)100%); 
 
    background: linear-gradient(to bottom, rgba(192, 207, 221, 1)0%, rgba(254, 254, 254, 1)5%, rgba(246, 246, 244, 1)26%, rgba(240, 240, 234, 1)84%, rgba(235, 235, 229, 1)89%, rgba(226, 223, 214, 1)95%, rgba(163, 174, 180, 1)100%); 
 
} 
 

 
.button_focus[type="button"]:focus { 
 
    outline: 0; 
 
    -webkit-box-shadow: 0 -1px 0 0 #E1DCC9, 1px 0 0 0 #F1EEE1, 0 1px 0 0 #FAF9F6, -1px 0 0 0 #E3DECC, inset 0 1px 0 0 #CEE7FF, inset 0 2px 0 0 #BCD4F6, inset -1px 0 0 0 #A1BEEC, inset -2px 0 0 0 #A1BEED, inset 0 -1px 0 0 #6982EE, inset 0 -2px 0 0 #89ADE4, inset 1px 0 0 0 #A0BEEC, inset 2px 0 0 0 #A4C2ED; 
 
    -moz-box-shadow: 0 -1px 0 0 #E1DCC9, 1px 0 0 0 #F1EEE1, 0 1px 0 0 #FAF9F6, -1px 0 0 0 #E3DECC, inset 0 1px 0 0 #CEE7FF, inset 0 2px 0 0 #BCD4F6, inset -1px 0 0 0 #A1BEEC, inset -2px 0 0 0 #A1BEED, inset 0 -1px 0 0 #6982EE, inset 0 -2px 0 0 #89ADE4, inset 1px 0 0 0 #A0BEEC, inset 2px 0 0 0 #A4C2ED; 
 
    box-shadow: 0 -1px 0 0 #E1DCC9, 1px 0 0 0 #F1EEE1, 0 1px 0 0 #FAF9F6, -1px 0 0 0 #E3DECC, inset 0 1px 0 0 #CEE7FF, inset 0 2px 0 0 #BCD4F6, inset -1px 0 0 0 #A1BEEC, inset -2px 0 0 0 #A1BEED, inset 0 -1px 0 0 #6982EE, inset 0 -2px 0 0 #89ADE4, inset 1px 0 0 0 #A0BEEC, inset 2px 0 0 0 #A4C2ED; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F6F6F3), color-stop(1, #F3F3EF), color-stop(1, #F5F5F5), color-stop(1, #F4F4F4), color-stop(1, #F3F3F3), color- stop(1, #F2F2F2), color-stop(1, #F1F1F1)); 
 
    background-image: -webkit-linear-gradient(bottom, #F6F6F3 0%, #F3F3EF 100%, #F5F5F5 100%, #F4F4F4 100%, #F3F3F3 100%, #F2F2F2 100%, #F1F1F1 100%); 
 
    background-image: -moz-linear-gradient(bottom, #F6F6F3 0%, #F3F3EF 100%, #F5F5F5 100%, #F4F4F4 100%, #F3F3F3 100%, #F2F2F2 100%, #F1F1F1 100%); 
 
    background-image: linear-gradient(to bottom, #F6F6F3 0%, #F3F3EF 100%, #F5F5F5 100%, #F4F4F4 100%, #F3F3F3 100%, #F2F2F2 100%, #F1F1F1 100%); 
 
} 
 

 
.main_container_two { 
 
    margin-left: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Modify Bulding Block</title> 
 
    <link rel="stylesheet" href="screen_3.css" /> 
 
</head> 
 

 
<body class="main_body"> 
 
    <form name="modify_building_block_html" id="modify_building_block_html"> 
 
    <div class="main_container_two main_con cont_bor cont_margin cont_border"> 
 
     <div class="main_container_one cont_bor cont_margin cont_border"> 
 
     <div class="main_container cont_margin cont_border"> 
 
      <div class="header"> 
 
      <span class="header_caption">Modify Building Block</span> 
 
      <div class="header_btn"> 
 
       <span class="help_btn row_display"> 
 
    \t \t \t \t \t \t \t \t \t <img src="help1_btn.png" alt="help_btn.png"/> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <span class="close_btn"> 
 
    \t \t \t \t \t \t \t \t \t <img src="close1_btn.png" alt="close_btn.png"/> 
 
    \t \t \t \t \t \t \t \t </span> 
 
      </div> 
 
      </div> 
 
      <div class="sub_container cont_margin"> 
 
      <div class="row_one row_width"> 
 
       <span class="row_one_col_one row_display rowone_font rowone_width"> 
 
    \t \t \t \t \t \t \t \t \t <label for="name_text"><u>N</u>ame: </label> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <span class="row_one_col_two text_one text_back row_display"> 
 
    \t \t \t \t \t \t \t \t \t <input type="text" accesskey="n" name="name_text" id="name_text" value="Dhananjay" class="select_one row_display text_font row_pad rowone_font"/> 
 
    \t \t \t \t \t \t \t \t </span> 
 
      </div> 
 
      <div class="row_two row_margin row_width"> 
 
       <span class="row_two_col_one row_display rowone_font rowone_width"> 
 
    \t \t \t \t \t \t \t \t \t <label for="gallery_select"><u>G</u>allery: </label> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <div class="row_two_col_two col_bor row_display"> 
 
       <select id="gallery_select" name="gallery_select" accesskey="g" class="select_gallery rowtwo_select row_height rowtwo_padding row_pad text_font 
 
    rowone_font row_background"> 
 
    \t \t \t \t \t \t \t \t \t \t <option value="heading" selected="selected">AutoText</option> 
 
    \t \t \t \t \t \t \t \t \t </select> 
 
       </div> 
 
      </div> 
 
      <div class="row_three row_margin row_width"> 
 
       <span class="row_three_col_one row_display rowone_font rowone_width"> 
 
    \t \t \t \t \t \t \t \t \t <label for="category_select"><u>C</u>ategory: </label> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <div class="row_three_col_two col_bor row_display"> 
 
       <select id="category_select" name="category_select" class=" select_text select_category rowthree_select rowthree_padding row_height row_pad text_font rowone_font row_background" accesskey="c"> 
 
    \t \t \t \t \t \t \t \t \t \t <option value="heading" selected="selected">General</option> 
 
    \t \t \t \t \t \t \t \t \t </select> 
 
       </div> 
 
      </div> 
 
      <div class="row_four row_margin row_width"> 
 
       <span class="row_four_col_one row_display rowone_font rowone_width"> 
 
    \t \t \t \t \t \t \t \t \t <label for="description_text"><u>D</u>escription: </label> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <div class="row_four_col_two col_bor row_display"> 
 
       <input type="text" name="description_text" id="description_text" class="desc_text text_back row_pad rowone_font" accesskey="d" /> 
 
       </div> 
 
      </div> 
 
      <div class="row_five row_margin row_width"> 
 
       <span class="row_five_col_one row_display rowone_font rowone_width"> 
 
    \t \t \t \t \t \t \t \t \t <label for="savein_select"><u>S</u>ave in: </label> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <div class="row_five_col_two col_bor row_display"> 
 
       <select id="savein_select" name="savein_select" accesskey="s" class="select_save_in rowfive_select row_pad text_font row_height rowfive_padding row_background rowone_font"> 
 
    \t \t \t \t \t \t \t \t \t \t <option value="heading" selected="selected">Normal.dotm</option> 
 
    \t \t \t \t \t \t \t \t \t </select> 
 
       </div> 
 
      </div> 
 
      <div class="row_six row_margin row_width"> 
 
       <span class="row_six_col_one row_display rowone_font rowone_width"> 
 
    \t \t \t \t \t \t \t \t \t <label for="options_select"><u>O</u>ptions: </label> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <div class="row_six_col_two col_bor row_display"> 
 
       <select id="options_select" name="options_select" accesskey="o" class="select_option rowsix_select row_pad text_font rowsix_padding row_height row_background rowone_font"> 
 
    \t \t \t \t \t \t \t \t \t \t <option value="heading" selected="selected">Insert content only</option> 
 
    \t \t \t \t \t \t \t \t \t </select> 
 
       </div> 
 
      </div> 
 
      <div class="button_group"> 
 
       <span> 
 
    \t \t \t \t \t \t \t \t \t <button type="button" name="ok_button" id="ok_button" class="ok_btn cont_bor row_height rowone_font button_focus" autofocus="autofocus">OK</button> 
 
    \t \t \t \t \t \t \t \t </span> 
 
       <span> 
 
    \t \t \t \t \t \t \t \t \t <button type="button" name="cancel_button" id="cancel_button" class="cancel_btn cont_bor row_height rowone_font button_focus">Cancel</button> 
 
    \t \t \t \t \t \t \t \t </span> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

Answer 1

私はビューポートまたは％単位の代わりに、PXで行くことにあなたを好むだろう。

https://css-tricks.com/viewport-sized-typography/

https://css-tricks.com/fun-viewport-units/

https://www.w3schools.com/cssref/css_units.asp