CSS3 - 媒体查询ADDRES只有smarthphone横向

Question

我有添加的风格为移动设备此css文件：

/* responsive styles */ 
/* Extra Small */ 
@media (max-width: 767px) { 
    .container { width: auto; } 
    .logo a, .logo a:hover { margin-left: 0 !important; width: 100% !important; background-position: 50% 0px; } 
    .logo { margin-bottom: 20px; } 
    .services a .row .service-container img { max-height: 60px; } 
    .services a .row .service-container { height: 60px; margin-bottom: 0.23em; } 
    .navbar.navbar-context.navbar-fixed-top .twentypx_marginbottom { margin-bottom: 0.24em; } 
    .navbar-context .navbar-nav > li.navmenu-item > a { padding-bottom: 5px; padding-top: 5px; padding-left: 30px; } 
    .navbar.navbar-context.navbar-fixed-top .fifteenpx_marginleft { margin-left: 30px; margin-right: 15px; } 
    .leftmenu, #hide-lm { display: none; } 
    .navbar-toggle .icon-bar { border: 1px solid #4b4c4e; } 
    .navbar-toggle { border: 1px solid #d0d1d3; } 
    /*#context_main_logo a { margin: 0 auto; float: none;}*/ 
    .list-group-item.row .col-md-3 { padding-bottom: 0.77em; padding-right: 1.54em; float: left; } 
    .list-group-item.row .col-md-3 > img { max-width: 100px; height: auto; } 
    .list-group-item.row .col-md-9 { padding-right: 0; } 
    .list-group-item.row { width: auto; } 
    /* PAGINATION */ 
    .pagination-container .col-xs-12 { text-align: center; } 
    .pagination { padding-left: 0px; margin-left: auto; margin-right: auto; } 
    .pagination>li>a, .pagination>li>span { padding: 6px 10px; } 
    .map-container { margin: 15px; width: auto; } 
    #map-canvas { 
     width: inherit; 
     height: 300px; 
     position: relative; 
     min-height: 1px; 
     padding-left: 15px; 
     padding-right: 15px 
    } 
    #context_website_button_oasis a, #context_website_button_oasis a:hover, 
    #context_website_button_concon a, #context_website_button_concon a:hover, 
    #context_website_button_industry a, #context_website_button_industry a:hover { width: inherit; } 

    /* INDUSTRY EVENTS TABLE */ 
    #industry-events-table table, #industry-events-table thead, 
    #industry-events-table tbody, #industry-events-table th, 
    #industry-events-table td, #industry-events-table tr { display: block; } 
    /* Hide table headers (but not display: none;, for accessibility) */ 
    #industry-events-table thead tr { position: absolute; top: -9999px; left: -9999px; } 
    #industry-events-table tr { border: 1px solid #ccc; } 
    #industry-events-table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } 
    #industry-events-table td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     width: 45%; 
     padding-right: 10px; 
     white-space: nowrap; 
     text-align:left; 
     font-weight: bold; 
    } 
    #industry-events-table td:before { content: attr(data-title); } 
    #context_main_logo a img { max-width: 90%; height: auto; } 
    #context_main_logo .navbar-toggle { 
     margin-right: 0px; 
     padding: 9px 13px; 
     margin-top: 0px; 
    } 
    .navbar-context { 
     min-height: 80px; 
    } 
    body.concon_style h2 { 
     margin-top: 5px; 
    } 

    img.richtext-image.full-width { 
     max-width: 100%; 
     height: auto; 
    } 
    /* BACK TO TOP */ 
    .back-to-top { font-size: 11px; bottom: 1em; } 
    /* PAGINATION */ 
    .pagination-container .col-xs-12 { text-align: center; } 
    .pagination { padding-left: 0px; margin-left: auto; margin-right: auto; } 

    /* SERVICES */ 
    .services .child-pages { display: none; } 
    body.services .row.services .col-md-4.col-sm-4.col-xs-12 { margin-bottom: 0.23em; } 
    body.services .services a .row .service-container .col-md-12 > span { 
     margin-top: 5px; 
     margin-bottom: 5px; 
    } 
    body.services .row.services .col-md-4.col-sm-4.col-xs-12 { 
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1); 
    } 

    /* RESOURCES */ 
    body.resources .context_website_button_resources a { 
     width: 100%; 
     height: 133px; 
     background-position: -10px -10px; 
     margin-bottom: 0.23em; 
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3); 
    } 

    /* EVENTS */ 
    #context_website_button_oasis a, #context_website_button_oasis a:hover { 
     background-image: url("/static/contextis/images/context_website_button_oasis_off.jpg"); 
    } 
    #context_website_button_concon a, #context_website_button_concon a:hover { 
     background-image: url("/static/contextis/images/context_website_button_concon_off.jpg"); 
    } 
    #context_website_button_industry a, #context_website_button_industry a:hover { 
     background-image: url("/static/contextis/images/context_website_button_industry_on.jpg"); 
    } 

    #context_website_button_oasis a, #context_website_button_concon a, #context_website_button_industry a, 
    #context_website_button_oasis a:hover, #context_website_button_concon a:hover, #context_website_button_industry a:hover{ 
     width: 100%; 
     height: 133px; 
     background-position: -10px -125px; 
     margin-bottom: 0.23em; 
     background-repeat: no-repeat; 
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3); 
    } 
} 


/* Small */ 
@media (min-width: 768px) and (max-width: 991px) { 
    .container { width: auto; } 
    .services a .row .service-container img { 
     max-height: 65px; 
     margin-top: 5px; 
    } 
    .carousel-inner>.item>a>img { margin-left: auto; margin-right: auto; } 
    footer #accrediation .row .logo a { margin: 0 auto;float: none; } 
    .navbar-nav>li { width: 9.77777%} 
    #leftmenu-content-href { display: none; } 
    /*.leftmenu, #hide-lm { display: none; }*/ 
    /*.map-container { margin: 15px; width: auto; }*/ 
    .col-sm-9.centralcolumn img { max-width: 100%; height: auto; } 
    #map-canvas { 
     width: inherit; 
     height: 300px; 
     width: 90%; 
     position: relative; 
     min-height: 1px; 
     padding-left: 15px; 
     padding-right: 15px 
    } 
    .navbar-fixed-top>.container>.clearboth.twentypx_marginbottom { 
     margin-bottom: 1.54em; 
    } 
    #context_main_logo .col-xs-10 { padding-left: 8px; } 
    img.richtext-image.full-width { 
     max-width: 100%; 
     height: auto; 
    } 
    /* RESOURCES */ 
    .context_website_button_resources img { width: 98%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } 
    .context_website_button_resources.first { padding-right: 0px; padding-left: 15px;} 
    .context_website_button_resources { padding-right: 7px; padding-left: 7px; } 
    .context_website_button_resources.last { padding-right: 15px; padding-left: 0px; } 
} 

/* Medium */ 
@media (min-width: 992px) and (max-width: 1199px) { 
    .container { 
     width: auto; 
    } 
    .services a .row .service-container img { 
     max-height: 65px; 
     margin-top: 5px; 
    } 
    .carousel-inner>.item>a>img { margin-left: auto; margin-right: auto; } 
    footer #accrediation .row .logo a { margin: 0 auto;float: none; } 
    #leftmenu-content-href { display: none; } 
    #context_main_logo .col-xs-10 { padding-left: 8px; } 

    /* RESOURCES */ 
    .context_website_button_resources img { width: 98%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } 
    .context_website_button_resources.first { padding-right: 0px; padding-left: 15px;} 
    .context_website_button_resources { padding-right: 7px; padding-left: 7px; } 
    .context_website_button_resources.last { padding-right: 15px; padding-left: 0px; } 
} 

/* Large */ 
@media (min-width: 1200px) { 
    footer #accrediation .col-md-3 { 
     width: 23%; 
    } 
    #leftmenu-content-href { display: none; } 
    #context_main_logo .col-xs-10 { padding-left: 8px; } 

    body.services .row.services .child-pages .col-md-12.col-sm-12.col-xs-12 { 
     min-height: 253px; 
     background-color: #e6e6e6; 
    } 

    /* RESOURCES */ 
    .context_website_button_resources a { 
     -webkit-transition: all .2s ease-in-out; 
     -moz-transition: all .2s ease-in-out; 
     -o-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out; 
     box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3); 
    } 

    .context_website_button_resources a:hover { 
     -webkit-transform: scale(1.05); 
     -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     transform: scale(1.05); 
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); 
    } 

    /* SERVICES */ 
    body.services .row.services .col-md-4.col-sm-4.col-xs-12 { 
     -webkit-transition: all .2s ease-in-out; 
     -moz-transition: all .2s ease-in-out; 
     -o-transition: all .2s ease-in-out; 
     -ms-transition: all .2s ease-in-out; 
     box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); 
    } 

    body.services .row.services .col-md-4.col-sm-4.col-xs-12:hover { 
     -webkit-transform: scale(1.05); 
     -moz-transform: scale(1.05); 
     -o-transform: scale(1.05); 
     transform: scale(1.05); 
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 1); 
     z-index: 1; 
    } 
    body.services .services a .row .service-container img { 
     max-height: 130px; 
    } 
    body.services .services .child-pages .links { 
     padding-top: 30px; 
     line-height: 2.0em; 
     font-size: 14px; 
    } 
} 

/* EXTRA STYLES OVERRIDES - START */ 

/* Smartphones (landscape) ----------- */ 
@media handheld and (min-width : 321px) { 
    body.resources .context_website_button_resources a { 
     background-size: 100%; 
     background-position: 0px -50px; 
    } 

    body.resources #blog-btn a { 
     background-position: 0px -70px; 
    } 
    #context_website_button_oasis a, #context_website_button_oasis a:hover { 
     background-size: 100%; 
     background-position: 50% -245px; 
    } 

    #context_website_button_concon a, #context_website_button_concon a:hover { 
     background-size: 80%; 
     background-position: 59% -182px; 
     background-repeat: repeat 
    } 
    #context_website_button_industry a, #context_website_button_industry a:hover { 
     background-size: 100%; 
     background-position: 50%; 
    } 

} 

/* Smartphones (portrait) ----------- */ 
@media only handheld and (max-width : 320px) { 

} 

/* Tablets (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    /*#context_website_button_oasis a, #context_website_button_concon a, #context_website_button_industry a,*/ 
    /*#context_website_button_oasis a:hover, #context_website_button_concon a:hover, #context_website_button_industry a:hover{*/ 
    /*width: 100%;*/ 
    /*height: 133px;*/ 
    /*background-position: -10px -125px;*/ 
    /*margin-bottom: 0.23em;*/ 
    /*background-repeat: no-repeat;*/ 
    /*box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);*/ 
    /*}*/ 
    body.services .row.services .col-md-4.col-sm-4.col-xs-12, #context_website_button_industry a, 
    #context_website_button_concon a, #context_website_button_oasis a { 
     box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.3); 
     background-size: 100%; 
    } 
    body.resources .context_website_button_resources a { 
     box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.3); 
     background-size: 103%; 
    } 

    body.resources #blog-btn a { 
     background-position: 0px -11px; 
    } 
    #context_website_button_oasis { 
     padding-right: 0px; 
     padding-left: 15px; 
    } 
    #context_website_button_concon { 
     padding-right: 7px; 
     padding-left: 7px; 
    } 
    #context_website_button_industry { 
     padding-right: 15px; 
     padding-left: 0px; 
    } 

} 

/* Tablets (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    #context_website_button_industry a, #context_website_button_concon a, #context_website_button_oasis a { 
     background-position: 50%; 
     width: 100%; 
     background-size: 120%; 
     height: 330px; 
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3); 
    } 
    #context_website_button_oasis { padding-right: 2px; } 
    #context_website_button_concon { padding-left: 7px; padding-right: 7px; } 
    #context_website_button_industry { padding-left: 2px; } 

    body.resources .context_website_button_resources a { 
     width: 100%; 
     height: 330px; 
     background-size: 110%; 
     background-position: 50%; 
     margin-bottom: 0.23em; 
     box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3); 
    } 

    body.services .row.services .col-md-4.col-sm-4.col-xs-12 { box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.3); 
} 
} 

/* Smartphones (landscape) ----------- */ 
@media only handheld and (min-width : 321px) { 
    body.resources .context_website_button_resources a { 
     background-size: 100%; 
     background-position: 0px -50px; 
    } 

    body.resources #blog-btn a { 
     background-position: 0px -70px; 
    } 
    #context_website_button_oasis a, #context_website_button_oasis a:hover { 
     background-size: 100%; 
     background-position: 50% -245px; 
    } 

    #context_website_button_concon a, #context_website_button_concon a:hover { 
     background-size: 80%; 
     background-position: 59% -182px; 
     background-repeat: repeat 
    } 
    #context_website_button_industry a, #context_website_button_industry a:hover { 
     background-size: 100%; 
     background-position: 50%; 
    } 

} 

/* Smartphones (portrait) ----------- */ 
@media only handheld and (max-width : 320px) { 

} 

/* EXTRA STYLES OVERRIDES - END */ 

我的问题是，我已经增加只是smarthphones的纵向的规则未被识别，可能是由于handheld关键字。如果我将它打到screen，它们也会影响更大的屏幕（平板电脑）和桌面。我该如何解决这个问题？

Answer 1

您不一定使用掌上电脑作为媒体类型。

Android和iOS忽略media =“handheld”。

此外，大多数现代智能手机浏览器都忽略手持式样式表。

只需使用针对低分辨率屏幕的媒体查询，并使用像素比和像素密度来更具体地定位现代移动设备。

智能手机

/*----- Smartphones (portrait and landscape) ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Place Your Styles Here */ 
} 
/*----- Smartphones (landscape) ----- */ 
@media only screen 
and (min-width : 321px) { 
/* Place Your Styles Here */ 
} 
/*----- Smartphones (portrait) ----- */ 
@media only screen 
and (max-width : 320px) { 
/* Place Your Styles Here */ 
} 

IPHONE 5

/*----- iPhone 5 in portrait & landscape ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 
/* Place Your Styles Here */ 
} 
/*----- iPhone 5 in landscape ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* Place Your Styles Here */ 
} 
/*----- iPhone 5 in portrait ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
/* Place Your Styles Here */ 
} 

IPHONE 2G-4S

/*----- iPhone 2G-4S in portrait & landscape ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Place Your Styles Here */ 
} 
/*----- iPhone 2G-4S in landscape ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
/* Place Your Styles Here */ 
} 
/*----- iPhone 2G-4S in portrait ----- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { 
/* Place Your Styles Here */ 
} 

当定位表你可能会考虑使用and orientation(landscape){，但对于移动并不是必要的，你可以简单地依靠屏幕分辨率。