第一個(gè)問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>問題</title>
<style>
@media only screen and (min-width: 100px) and (max-width: 550px) {
.center {
width: 500%;
}
}
</style>
</head>
<body>
<div class="center">
<label>門店名稱</label>
<input type="text" name="">
<label>門店地址</label>
<input type="text" name="">
</div>
</body>
</html>
第二個(gè)問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>問題</title>
<style>
input {
margin-right: 30px;
}
@media only screen and (min-width: 510px) and (max-width: 550px) {
input {
width: 140px;
}
}
@media only screen and (min-width: 488px) and (max-width: 510px) {
input {
width: 130px;
}
}
@media only screen and (min-width: 448px) and (max-width: 488px) {
input {
width: 110px;
}
}
@media only screen and (min-width: 408px) and (max-width: 448px) {
input {
width: 90px;
}
}
@media only screen and (min-width: 388px) and (max-width: 408px) {
input {
width: 80px;
}
}
@media only screen and (min-width: 100px) and (max-width: 388px) {
input {
display: block;
}
}
</style>
</head>
<body>
<div class="center">
<label>門店名稱</label>
<input type="text" name="">
<label>門店地址</label>
<input type="text" name="">
</div>
</body>
</html>
