Question

我在使用DreamWeaver 2017时遇到了响应问题。

徽标的CSS：

#logo {
    margin-left: 6cm;
    padding-top: 40px;
    padding-bottom: 10px;
    /*width: 139px;*/
    text-align: left;
    color: rgba(255,255,255,1.00);

}

尝试响应时：

我知道我使用了保证金，导致它。

目标是像这样调整网站和移动网站：

另外，如果您观察到输入框也向右缩进..

.menu2 {
    display: inline-flex;
    text-decoration:none;
    margin-left: 1.2cm;
    color: #000000;
    height: 40px; 
}

我正在寻找除填充或边距之外的其他方法。任何批评/建议都是受欢迎的。

HTML code：

 <header> 
<!-- This is the header content. It contains Logo and links -->
    <div id="logo"><img src="logo.png" alt="sojologo"/> 
    <font color="black" class="menu1">ABOUT</font>
    <button id="logodropdown"><img src="dropdown_arrow.png"/></button>
    <a href="#" class="menu2">SIGN IN/<br>REGISTER</a>
    <a href="#" class="menu2">PROMOTIONS</a>
    <a href="#" class="menu2">TRAVEL</a><button id="logodropdown"><img src="dropdown_arrow.png"/></button>

<div class="menu2" style="border: 3px solid #DDD;">
    <img  src="icon_search.png"/>
       <input size="50%"  placeholder="Quick Search for any city or 
              street in Japan" style="border:none;"/>
      </div>
    </div>

  </header>

Codepenio：https://codepen.io/jayvicious/pen/xrxbZz

Answer 1

好的FreedomPride 您可以为每个屏幕大小的每个类指定不同的属性你可以在这种情况下使用媒体查询。例如：

@media only screen and (max-width: 480px) {
       .menu2 {
        margin-left:20px;
        }
     }

如你所见，我将480px宽的小屏幕边距改为20px 你可以为每种尺寸使用它

320px

480px

720px

1200px

您可以从此处获取有关mediaquery的更多信息： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

以下是我们如何做到这一点的例子：

@charset "utf-8";
/* Global Styles */
a:hover {
	color: rgba(255,255,255,1.00);
}
/*header*/
header {
	font-family: 'Montserrat', sans-serif;
	color: rgba(146,146,146,1.00);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
}
#menu1 {
    display: inline-block;
    margin-left: 3cm;
    margin-right: auto;
    height: 30px; 
}
.menu2 {
    display: inline-flex;
	text-decoration:none;
    margin-left: 1.2cm;
	color: #000000;
    height: 40px; 
}
/* Logo placeholder*/
#logo {
	margin-left: 6cm;
	padding-top: 40px;
	padding-bottom: 10px;
	/*width: 139px;*/
	text-align: left;
	color: rgba(255,255,255,1.00);
	
}
#logodropdown {
	margin-left: 0px;	
	border: none;
	background-color: rgba(255,255,255,1.00);
}
/* div for Links in header */
#headerLinks {
	float: left;
	width: calc( 100% - 139px );
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgba(255,255,255,1.00);
}
/* Links in header */

#imgContainer{
    float:left;
}
#headerLinks a {
	text-decoration: none;
	color: rgba(146,146,146,1.00);
	padding-left: 66px;
	font-size: 14px;
}
/* Offer text banner*/
#offer {
	font-family: 'Montserrat', sans-serif;
	clear: both;
	background-color: rgba(246,246,246,1.00);
	color: rgba(146,146,146,1.00);
	padding-top: 57px;
	padding-bottom: 57px;
}

@media only screen and (max-width: 1366px) {
  #logo {
	margin-left: 1cm;
	padding-top: 40px;
	padding-bottom: 10px;
	/*width: 139px;*/
	text-align: left;
	color: rgba(255,255,255,1.00);
	
}
  @media only screen and (max-width: 1366px) {
  #logo {
	margin-left: 1cm;
	padding-top: 40px;
	padding-bottom: 10px;
	/*width: 139px;*/
	text-align: left;
	color: rgba(255,255,255,1.00);
	
}
    @media only screen and (max-width: 1280px) {
      #logo {
        margin-left:30px;
      }
      #menu1 {
        margin-left:35px;
      }
      .menu2 {
        margin-left:20px;
      }
      .menu2 input {
        max-width:300px;
      }
}
    @media only screen and (max-width: 992px) {
      #logo {
        margin-left:25px;
      }
      #menu1 {
        margin-left:25px;
        font-size:18px;
      }
      .menu2 {
        margin-left:15px;
        font-size:14px;
      }
      .menu2 input {
        max-width:250px;
        font-size:11px;
      }
      @media only screen and (max-width: 720px) {
      #logo {
        margin-left:10px;
      }
      #menu1 {
        margin-left:10px;
        font-size:13px;
      }
      .menu2 {
        margin-left:5px;
        font-size:10px;
      }
      .menu2 input {
        max-width:150px;
        font-size:10px;
      }
    }

<header> 
<!-- This is the header content. It contains Logo and links -->
    <div id="logo"><img src="logo.png" alt="sojologo"> 
 	<font color="black" id="menu1">ABOUT</font>
 	<button id="logodropdown"><img src="dropdown_arrow.png"></button>
 	<a href="#" class="menu2">SIGN IN/<br>REGISTER</a>
 	<a href="#" class="menu2">PROMOTIONS</a>
 	<a href="#" class="menu2">TRAVEL</a><button id="logodropdown"><img src="dropdown_arrow.png"></button>


<div class="menu2" style="border: 3px solid #DDD;">
    <img  src="icon_search.png"/>
    <input size="50%"  placeholder="   Quick Search for any city or street in Japan" style="border: none;"/>
</div>

注意：这不是最佳做法。但为了提高效率，你必须使用任何网格系统或框架，如bootstrap，foundation或uikit。

Answer 2

我们可以看到这里有很多事情要做。其他人评论的一件事就是你的HTML需求得到了清理。确保ID真正唯一，并且每个开始标记都有一个结束标记（除了自包含的元素，如图像和输入）。

您还可以使用一些包装元素来帮助您包含标题的主要区域：徽标，导航项和搜索。

从那里开始，为了帮助提高响应速度，我建议尽可能使用宽度的百分比，而不是厘米等绝对单位。这将有助于您的显示屏在更大的屏幕尺寸下稍微弯曲。但是，在某些时候，您需要重做布局，因为屏幕太宽，无法将所有元素放在一行中。 media queries发挥作用的地方。

当屏幕小于（或大于）某个宽度时，媒体查询将允许您覆盖基本样式。例如，我们可以将正文设置为蓝色，然后在较小的屏幕上更改为红色：

body {
  background-color: blue;
}
@media all and (max-width: 800px) {
  body {
    background-color: red;
  }
}

我们可以做的另一件事是整理事物并让我们的生活更轻松，尽可能使用课程。导航项是一个很好的用例：大多数样式将被共享。我们可以为每个人提供一个ID以防万一，但我们甚至可能不需要使用所有这些ID。

编辑：我想提到的另一个整理机会是，从HTML5开始，我们不推荐使用<font>代码，因此您应该在HTML中避免这种情况。我从下面的代码段中的HTML中删除了它。（结束编辑。）

您可以做的最后一件事是在导航项with HTML and CSS旁边制作小三角形而不是图像。（您也可以使用伪元素在CSS中完全执行这些操作。）

这是一个演示，我已经清理了很多HTML，然后对CSS进行了大量修改，看起来更像是你提供的图片中的内容。我根据图片使用了占位符图像，并根据实际尺寸进行了最佳猜测。您将看到，当您调整屏幕大小时，媒体查询会启动以使标题变得更高并将内容置于屏幕中间。

我还在CodePen上forked your Pen。

＆＃13;

@charset "utf-8";
/* Global Styles */
a:hover {
  color: rgba(255,255,255,1.00);
}
body {
  margin: 0;
}
header {
  font-family: 'Montserrat', sans-serif;
  color: rgba(146,146,146,1.00);
  background-color: #73A7D1;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  width: 100%;
  height: 80px;
}
#header-wrapper {
  width: 80%;
  margin: 0 10%;
  padding-top: 15px;
}
#logo, nav, #search {
  float: left;
}
#logo {
  width: 110px;
  height: 50px;
}
nav {
  width: 60%;
}
#search {
  width: 200px;
}
.menu-item {
  display: inline-block;
  margin: 0 2.5%;
  height: 30px;
  color: black;
  max-width: 100px; /* forces "sign in/register to break at <wbr> tab */
  text-align: center;
}
#menu2 {
  position: relative; /* bump "sign in/register" down a bit */
  top: 7px;
}
.triangle-down { /* dropdown arrows next to nav links */
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid black;
  display: block;
  float: right;
  margin-top: 5px;
  margin-left: 3px;
}
#search img, #search input {
  float: left;
  height: 30px;
}
#search img {
  margin-right: 5px;
}
#search input {
  width: 150px;
}

@media all and (max-width: 980px) {
  header {
    height: 160px;
  }
  #logo, nav, #search {
    float: none;
    margin: 0 auto;
  }
  nav {
    width: 100%;
    text-align: center;
  }
}
@media all and (max-width: 550px) {
  header {
    height: 200px;
  }
}

＆＃13;

<header> 
  <div id="header-wrapper">
    <div id="logo"><img src="http://placehold.it/110x50" alt="sojologo"></div>
    <nav>
      <div class="menu-item" id="menu1">ABOUT<span class="triangle-down"></span></div>
      <div class="menu-item" id="menu2"><a href="#">SIGN IN/<wbr>REGISTER</a></div>
      <div class="menu-item" id="menu3"><a href="#">PROMOTIONS</a></div>
      <div class="menu-item" id="menu4"><a href="#">TRAVEL<span class="triangle-down"></span></a></div>
    </nav>

    <div id="search">
      <img src="http://placehold.it/30x30"/>
      <input placeholder="Quick Search for any city or street in Japan" />
    </div>
  </div>
</header>

＆＃13;

Answer 3

我认为您应该检查media rules以获得您想要的任何宽度/高度的完整响应。

HTML响应无法正常工作

3 个答案: