Question

我的导航栏在大屏幕上效果很好，但是一旦我接到手机，“＃34;属性”链接就会出现在我的导航栏下方。我该如何解决？我可以将尺寸缩小到仅适用于较小的屏幕吗？所以看起来和它在大屏幕上看起来完全一样？

另外，我对此非常陌生，所以我请求你非常具体。谢谢。

＆＃13;

my_str = 'any.string.with.many.points'

my_str.split('.')[len(my_str.split('.'))-2:len(my_str.split('.'))]
>>> ['many','points']

＆＃13;

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

＆＃13;

Answer 1

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

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

＆＃13;

@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
  }
}

＆＃13;

<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>

＆＃13;

为了解释这一点，我只是使用*{font-size: 10px}定位所有内容，但您必须根据需要调整每个内容。

希望它有助于：）

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

1 个答案: