Question

当我放大缩小时，我的网站内容以不同的方向运行。

我该如何修复网站上的内容？

＆＃13;

   * {
  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;
}

＆＃13;

<!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">
    									<img src="help1_btn.png" alt="help_btn.png"/>
    								</span>
              <span class="close_btn">
    									<img src="close1_btn.png" alt="close_btn.png"/>
    								</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">
    									<label for="name_text"><u>N</u>ame: </label>
    								</span>
              <span class="row_one_col_two text_one text_back row_display">
    									<input type="text" accesskey="n" name="name_text" id="name_text" value="Dhananjay" class="select_one row_display text_font row_pad rowone_font"/>
    								</span>
            </div>
            <div class="row_two row_margin row_width">
              <span class="row_two_col_one row_display rowone_font rowone_width">
    									<label for="gallery_select"><u>G</u>allery: </label>
    								</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">
    										<option value="heading" selected="selected">AutoText</option>
    									</select>
              </div>
            </div>
            <div class="row_three row_margin row_width">
              <span class="row_three_col_one row_display rowone_font rowone_width">
    									<label for="category_select"><u>C</u>ategory: </label>
    								</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">
    										<option value="heading" selected="selected">General</option>
    									</select>
              </div>
            </div>
            <div class="row_four row_margin row_width">
              <span class="row_four_col_one row_display rowone_font rowone_width">
    									<label for="description_text"><u>D</u>escription: </label>
    								</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">
    									<label for="savein_select"><u>S</u>ave in: </label>
    								</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">
    										<option value="heading" selected="selected">Normal.dotm</option>
    									</select>
              </div>
            </div>
            <div class="row_six row_margin row_width">
              <span class="row_six_col_one row_display rowone_font rowone_width">
    									<label for="options_select"><u>O</u>ptions: </label>
    								</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">
    										<option value="heading" selected="selected">Insert content only</option>
    									</select>
              </div>
            </div>
            <div class="button_group">
              <span>
    									<button type="button" name="ok_button" id="ok_button"  class="ok_btn cont_bor row_height rowone_font button_focus" autofocus="autofocus">OK</button>
    								</span>
              <span>
    									<button type="button" name="cancel_button" id="cancel_button" class="cancel_btn cont_bor row_height rowone_font button_focus">Cancel</button>
    								</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</body>

</html>

＆＃13;

Answer 1

我希望您使用 view-port 或％单位而不是px。

以下是一些有用的链接：

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

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

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

如何修复放大缩小问题

1 个答案: