问题
I'm making a website and I'm trying to make it responsive. The first thing that I want to make responsive is the header. On the header I have the logo of the website and 5 buttons that are "Home", "About", "Team" and "Contact Us"
The HTML looks like this:
<div class="clearfix" id="header" style="">
<div class="clearfix" id="logo" style="">
<!-- Lynxus Logo -->
<a class="nonblock nontext museBGSize grpelem" id="u223" href="index.html"><!-- simple frame --></a>
</div>
<div class="clearfix" id="nav" style="">
<!-- Home -->
<a class="nonblock nontext museBGSize grpelem" id="u224" href="index.html"><!-- simple frame --></a>
<!-- About -->
<a class="nonblock nontext museBGSize grpelem" id="u225" href="#"><!-- simple frame --></a>
<!-- Team -->
<a class="nonblock nontext museBGSize grpelem" id="u226" href="#"><!-- simple frame --></a>
<!-- Blog -->
<a class="nonblock nontext museBGSize grpelem" id="u227" href="http://lynxusapp.blogspot.com/" target="_blank"><!-- simple frame --></a>
<!-- Contact Us -->
<a class="nonblock nontext museBGSize grpelem" id="u228" href="#"><!-- simple frame --></a>
</div>
and the css is like this:
#header
{
z-index: 1;
width: 100%;
min-height: 80px;
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#logo{
z-index: 1;
width: 228px;
min-height: 80px;
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#nav{
z-index: 1;
width: 732px;
min-height: 80px;
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
#u223
{
z-index: 16;
width: 228px;
height: 77px;
position: relative;
margin-right: -10000px;
margin-top: 10px;
left: 10px;
background: transparent url("../images/LynxusLogo.png") no-repeat left top;
background-size: contain !important;
}
#u224
{
z-index: 17;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 280px;
background: transparent url("../images/Home.png") no-repeat left top;
background-size: contain !important;
}
#u224:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Home-hover.png") no-repeat left top;
background-size: contain !important;
}
#u225
{
z-index: 18;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 430px;
background: transparent url("../images/About.png") no-repeat left top;
background-size: contain !important;
}
#u225:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/About-hover.png") no-repeat left top;
background-size: contain !important;
}
#u226
{
z-index: 19;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 580px;
background: transparent url("../images/Team.png") no-repeat left top;
background-size: contain !important;
}
#u226:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Team-hover.png") no-repeat left top;
background-size: contain !important;
}
#u227
{
z-index: 20;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 730px;
background: transparent url("../images/Blog.png") no-repeat left top;
background-size: contain !important;
}
#u227:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Blog-hover.png") no-repeat left top;
background-size: contain !important;
}
#u228
{
z-index: 21;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 880px;
background: transparent url("../images/Contact.png") no-repeat left top;
background-size: contain !important;
}
#u228:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Contact-hover.png") no-repeat left top;
background-size: contain !important;
}
I've been trying to use min-height, min-width and other stuff that I've found on the Internet but they haven't worked so far. Does anyone know how I can solve it?
回答1:
Responsive designs responds to media queries in CSS3. It Detects the width of the device/browser and responds accordingly
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
回答2:
Give both the parent container and the image max-width and height:auto.
#header {
max-width: 100%;
height: auto;
}
#logo {
max-width: 100%;
height: auto;
}
回答3:
You could use a scheme like this. Check it out my example. You can expand and shrink down the display panel to see how it is responsive. Take a look at this example
If you like it maybe I could expand on this a bit.
#header {
width:90%;
float:left;
background:#999;
padding:20px 5%;
}
#logo {
width:40%;
height:100px;
float:left;
margin:0 10% 0 0;
background:#666;
}
#nav {
width:50%;
float:left;
}
#nav .nav-item {
width:14%;
float:left;
margin:0 1%;
padding:10px 2%;
background:#ccc;
}
来源：https://stackoverflow.com/questions/24394168/responsive-images-with-css-html