html - 如何在较小的屏幕上最小化我的导航栏-6ren

html - 如何在较小的屏幕上最小化我的导航栏

转载作者：行者123 更新时间：2023-11-28 01:43:07

我的导航栏在大屏幕上工作得很好，但一旦我拿到我的手机，“属性”链接就在我的导航栏下方。我该如何解决？我可以只为较小的屏幕最小化尺寸吗？以便它看起来和在大屏幕上完全一样？

此外，我对此很陌生，所以我恳请您非常具体。谢谢。

 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, intial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
  <style type="text/css">
	
    @media (max-width: 600px){
		.responsive{
			width:100% !important;
			padding-left:2% !important;
			padding-right:2% !important;
			text-align:jusitfy !important;
			margin-left:auto !important;
			margin-right:auto !important;
		}

}	@media (max-width: 600px){
		.height{
			height:auto !important;
		}

}	@media (max-width: 600px){
		.responsive img{
			width:100% !important;
			height:auto !important;
			text-align:center !important;
		}

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff">
    <!-- START SECTION ONE -->
    
    <table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
            <tr>
              <td align="center" style="padding:0px 0px 0px 0px;">
                <table align="center" style="width:100%;max-width:620px;" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td>
                      <table align="center" style="width:100%;margin-left:auto;margin-right:auto;">
                        <tr>
                          <td width="100%" align="right" style="padding:10px;text-decoration:none;color:#000000;font-size:10px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;">
                            
                          </td>
                        </tr>
                        <tr>
                          <td width="100%" align="center" style="padding:0px 0px 0px 0px;">

                          </td>
                        </tr>
                      </table>
                      <table align="center" style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0" class="responsive">
                        <tr>
                          <td align="center" width="100%" style="padding:10px 10px 10px 10px;font-size:14px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;letter-spacing:px;" class="responsive">
                            
                            <!-- your navigation bar below -->
                            
                            <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about">
                              ABOUT US
                            </a>
                            
                            <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about#!contact">
                              BROKERS
                            </a>
                            
                            <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/home#!contact">
                              CONTACT
                            </a>
                          
                            <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/properties">
                              PROPERTIES
                            </a>

最佳答案

首先，您无需为添加的每个样式指定相同的媒体查询，只需一个就足够了。

您的问题的一个解决方案是针对较小的屏幕减小字体大小。

@media (max-width: 600px) {
  .responsive {
    width: 100% !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
    text-align: jusitfy !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .height {
    height: auto !important;
  }
  .responsive img {
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
  }
  * {
    font-size: 10px
  }
}

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" bgcolor="#ffffff">
  <!-- START SECTION ONE -->

  <table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
        <table bgcolor="#ffffff" align="center" style="width:100%;max-width:640px;border-bottom:1px solid #707070;">
          <tr>
            <td align="center" style="padding:0px 0px 0px 0px;">
              <table align="center" style="width:100%;max-width:620px;" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td>
                    <table align="center" style="width:100%;margin-left:auto;margin-right:auto;">
                      <tr>
                        <td width="100%" align="right" style="padding:10px;text-decoration:none;color:#000000;font-size:10px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;">

                        </td>
                      </tr>
                      <tr>
                        <td width="100%" align="center" style="padding:0px 0px 0px 0px;">

                        </td>
                      </tr>
                    </table>
                    <table align="center" style="width:100%;max-width:600px;" border="0" cellpadding="0" cellspacing="0" class="responsive">
                      <tr>
                        <td align="center" width="100%" style="padding:10px 10px 10px 10px;font-size:14px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;line-height:20px;letter-spacing:px;" class="responsive">

                          <!-- your navigation bar below -->

                          <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about">
                              ABOUT US
                            </a>

                          <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/about#!contact">
                              BROKERS
                            </a>

                          <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/home#!contact">
                              CONTACT
                            </a>

                          <a style="padding: 10px 10px 10px 10px;color:#000000;text-decoration:none;" href="http://www.mellorgroup.ca/en/properties">
                              PROPERTIES
                            </a>
</body>