我写了一个媒体查询，但它在某些时候中断了，我现在正在尝试优化查询到以下内容：
@media only screen and (max-width: 1366px) and (min-width: 1280px) {
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) {
}
@media only screen and (max-width: 1024px) and (min-width: 768px) {
}
@media only screen and (max-width: 768px) and (min-width: 640px) {
}
@media only screen and (max-width: 640px) and (min-width: 320px) {
}
这是我现在正在使用的那个
@media only screen and (max-width: 1366px) {
.menuTemplate3
{
margin-top: 3%;
}
.menuTemplate3 a
{
padding: 0 30px;
}
.wrap{
width:95%;
}
.span_of_2 {
padding: 3% 0;
margin: 4% 0;
}
.menu li {
margin: 6px 16px;
}
}
@media only screen and (max-width: 1280px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 25px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 6px 12px;
}
.booking_room h4 {
font-size: 1.2em;
}
.booking_room p {
font-size: 0.8125em;
}
.f_nav li {
margin-left: 10px;
}
}
@media only screen and (max-width: 1024px) {
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 17px !important;
}
.wrap{
width:95%;
}
.menu li {
margin: 10px 8px;
}
.menu li a {
font-size: 0.8725em;
}
.reservation ul li.span1_of_3 {
width: 14.33333%;
margin-left: 15px;
}
.f_nav li a {
padding: 0 0px;
}
.grid1_of_3 {
float: left;
width: 100% !important;
margin-left: 0%;
}
}
@media only screen and (max-width: 768px) {
.menuTemplate3
{
margin-top: -3% !important;
}
.menuTemplate3 a
{
padding: 0 9px !important;
}
.wrap{
width:95%;
}
.row .grid_3 {
float: right;
width: 38.333333% !important;
}
.menu {
display: none;
}
.logo img
{ margin-left: -14% !important; }
.h_right {
width: 100%;
float: none;
}
.row {
width: 70% !important;
}
.top-nav {
display: block;
margin: 10px 0;
z-index: 999;
position: relative;
}
.nav a{
display: block;
}
.reservation ul li {
float: none;
display: inline-block;
}
.booking_room {
float: none;
width: 98%;
}
.reservation {
float: none;
width: 98%;
}
.b_room {
display: inline-block;
}
.grid1_of_3 h4 a {
font-size: 1.4em;
}
.copy {
float: none;
text-align:center;
}
.f_nav {
float: none;
text-align:center;
margin-top: 20px;
}
.soc_icons {
text-align: center;
margin: 20px 0;
}
.content {
float: none;
width: 100%;
margin-right: 0%;
}
.sidebar {
float: none;
width: 100%;
padding-left: 0%;
border-left: none;
}
.sidebar h4 {
margin: 4% 0 4%;
}
.sel_room {
float: none;
width: 100%;
}
.sel_room.left {
margin-left: 0%;
}
.service_list li {
width: 48.3333%;
margin-bottom:4%;
}
.service_list li:nth-child(3){
margin-left: 0;
}
.reservation h5 {
margin: 10px 0;
}
}
@media only screen and (max-width: 640px){
.menuTemplate3
{
margin-top: 3% !important;
}
.menuTemplate3 a
{
padding: 0 8px;
}
.wrap{
width:95%;
}
.logo{
width: 20%;
}
.h_right{
width:100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation ul li.span1_of_1 {
width: 100%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.book_date input[type="text"] {
width: 96% !important;
}
.reservation ul li.left {
margin-left: 0px;
}
.reservation ul li.span1_of_2 {
width: 49.33333%;
}
.reservation ul li.span1_of_3 {
width: 47.33333%;
margin-left: 10px;
}
.grid1_of_3 {
float: left;
width: 100%;
margin-left: 0%;
}
.grid1_of_3 h4 a {
margin: 2% 0;
}
.grid1_of_3 img{
margin-top:4%;
width: 10%;
}
.online_reservation {
margin-top: -30px;
}
.reservation ul li.span1_of_2 {
width: 48.33333%;
}
.res_btn form input[type="submit"] {
width: 50% !important;
padding: 10px;
}
.contact_left {
float: none;
margin-right: 0%;
width: 100%;
}
.contact_right {
float: none;
width: 100%;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
@media only screen and (max-width: 530px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 32.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.online_reservation {
margin-top: 0px;
}
.date_btn {
margin: 0 0 20px;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
@media only screen and (max-width: 320px) {
.menuTemplate3
{
margin-top: -11%;
width: 70%;
}
.menuTemplate3 a
{
padding: 0 15px;
}
.wrap{
width:95%;
}
.logo{
width: 38.333333%;
}
.h_right{
width:60.333333%;
}
.row .grid_3 {
width: 70.333333% !important;
}
.reservation {
padding: 10px;
width: 97%;
}
.booking_room {
width: 97%;
padding: 10px;
}
.hide{
display: none;
}
.reservation ul li.span1_of_2 {
width: 100%;
}
.reservation ul li.span1_of_3 {
width: 100%;
margin-left: 0px;
}
.book_date input[type="text"] {
width: 93% !important;
}
.soc_icons ul li {
margin-left: 0px;
}
.grids_of_img {
float: none;
width: 100%;
}
.grids_of_para {
float: none;
width: 100%;
margin-left: 0%;
}
.span2_of_1 {
float: none;
width: 100%;
margin-left: 0%;
}
.res_btn form input[type="submit"] {
width: 60% !important;
padding: 10px;
}
.service_list li {
float:none;
margin-left:0;
width: 100%;
margin-bottom: 4%;
}
.contact-form input[type="text"], .contact-form textarea {
width: 93% !important;
}
.contact-form input[type="submit"] {
padding: 10px;
width: 50% !important;
}
.logo img{
margin-left: 0%;
margin-top: 2%;
}
}
有人可以帮我使用优化的媒体查询吗？我很困惑放置课程。
答案 0 :(得分：0)
您应该max-width和min-width同时使用this is example等媒体查询
答案 1 :(得分：0)
您希望同时使用最小和最大宽度进行优化：
@media (min-width: 1281px) and (max-width: 1366px) {
}
@media (min-width: 1025px) and (max-width: 1280px) {
}
@media (min-width: 769px) and (max-width: 1024px) {
}
@media (min-width: 641px) and (max-width: 768px) {
}
@media (min-width: 321px) and (max-width: 640px){
}
@media (min-width: 1px) and (max-width: 320px) {
}