我正在尝试设计一个网页,我必须根据所使用的设备类型做出响应。
在尝试这个时,我一直试图让它以不同的方式响应从iPhone到iPad到桌面。
第二个也是最后一个工作得很好。但试图让它在iPhone上调整我想要的方式似乎只是不想这样做。
/* iPhone Query */
@media only screen and (min-width : 375px) and (max-width : 667px) and (-webkit-min-device-pixel-ratio:2){
body{
margin: 0;
padding: 0;
width: 100%;
}
section.display{
width: 90%;
margin-left: auto;
margin-right: auto;
}
form {
-webkit-appearance: none;
}
form.logout-form button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: .75em;
line-height: 75em;
color: white;
/* Styles */
border: none; /* Remove the default border */
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 0.0625em 0 rgba(255,255,255,0.3),
0 0.0625em 0.125em rgba(0,0,0,0.35),
inset 0 0.1875em 0.125em rgba(255,255,255,0.2),
inset 0 -0.1875em 0.125em rgba(0,0,0,0.1);
cursor: pointer;
-webkit-appearance: none;
}
section.item{
width: 100%;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
float: left;
margin-top: 2.5%;
}
img{
width: 100%;
}
}
body{
margin: 0;
padding: 0;
width: 100%;
}
.main{
background-color: white !important;
left: 0;
width: 100%;
}
.display{
width: 70%;
background-color: white !important;
margin-left: auto;
margin-right: auto;
}
.item{
width: 30%;
border: 1px solid black;
margin-left: 3%;
float: left;
margin-top: 2.5%;
}
.logout{
width: 100%;
text-align: right;
border-bottom: 1px solid black;
padding-bottom: 1em;
}
.welcome{
margin-top: -1.9em;
margin-right: 5.4em;
}
.header{
margin: 0 0;
width: 100%;
background-color: #42A2BC;
}
.title{
width: 100%;
}
h1{
font-family: 'Lato', Calibri, Arial, sans-serif;
margin: 0;
padding-top: .75em;
padding-left: 1em;
color: white;
font-size: 2em;
}
img{
width: 100%;
}
p{
margin-left: 1em;
}
h2{
font-family: 'Lato', Calibri, Arial, sans-serif;
padding-left: .75em;
padding-right: .75em;
}
table{
margin-left: 1em;
}
td{
font-family: 'Lato', Calibri, Arial, sans-serif;
}
tr.spacerow > td{
padding-top: .5em;
}
td.last{
padding-bottom: .5em;
}
.colinfo{
padding-left: 1em;
}
.price{
width: 50%;
text-align: center;
float: right;
background-color: #42A2BC;
display: table-cell;
vertical-align: top;
position:relative;
}
.lowerfeatures{
width: 100%;
background-color: #42A2BC;
overflow: hidden;
}
.edit{
width: 50%;
float: left;
text-align: center;
background-color: #42A2BC;
}
.edithl {
color: white;
text-decoration: none;
}
.edithl:hover{
text-decoration: underline;
}
ul.menu {
list-style-type: none;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.menu li{
display: inline;
margin: 0 2em;
}
li a{
text-decoration: none;
color: #42A2BC;
}
li a:hover{
padding-bottom: 5px;
border-bottom: 1px solid #000;
}
nav{
width: 100%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.logout-form button[type=submit]:focus {
outline: none;
}
.logout-form .submit {
/* Size and position */
width: 2.1875em;
height: 2.1875em;
position: absolute;
top: 0em;
right: 1.5em;
padding: 0.625em;
z-index: 2;
/* Styles */
background: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow:
0 0 0.125em rgba(0,0,0,0.1),
0 0.1875em 0.125em rgba(0,0,0,0.1),
inset 0 -0.1875em 0.125em rgba(0,0,0,0.2);
}
.logout-form .submit:after {
/* Size and position */
content: "";
width: 0.625em;
height: 0.625em;
position: absolute;
top: -0.125em;
left: 1.875em;
/* Styles */
}
.logout-form button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: 1.4em;
line-height: 1.75em;
color: white;
/* Styles */
border: none; /* Remove the default border */
-webkit-border-radius: inherit;
-moz-border-radius: inherit;
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 0.0625em 0 rgba(255,255,255,0.3),
0 0.0625em 0.125em rgba(0,0,0,0.35),
inset 0 0.1875em 0.125em rgba(255,255,255,0.2),
inset 0 -0.1875em 0.125em rgba(0,0,0,0.1);
cursor: pointer;
}
.logout-form button:hover,
.logout-form button[type=submit]:focus {
background: #52cfeb;
transition: all 0.3s ease-out;
-webkit-appearance: none;
}
.logout-form button:active {
background: #42A2BC;
box-shadow:
inset 0 0 0.3125em rgba(0,0,0,0.3),
inset 0 0.1875em 0.250em rgba(0,0,0,0.3);
-webkit-appearance: none;
}
这一切都在我的网页浏览器中调整得很好但是当我转到iPhone本身时它不会调整大小,直到我将min-width设置为980px。
有人可以提供一些关于出错的建议吗?
答案 0 :(得分:1)
您需要将<meta name="viewport" content="width=device-width, initial-scale=1">
添加到html代码的<head>
部分。