Question

所以我制作的移动网络应用程序应该占用屏幕的100％而不需要滚动（向任一方向）。

我为屏幕的不同区域设置了固定位置。

    html, body{
    height: 100%;   
    margin: 0;
    padding: 0;
    width: 100%;
}

.site-header{
    position: fixed;
    top: 0px;
    height: 10%;    
    background: red;
    width: 100%;
}

.site-article{
    position: fixed;
    top: 10%;
    bottom: 10%;    
    background: white;
    width: 95%;
}

.site-footer{
    position: fixed;
    bottom: 0px;
    height: 10%;    
    background: blue;
    width: 100%;
}

.site-nav{
    position: fixed;
    top: 10%;
    bottom: 10%;
    right: 0px;
    background: green;
    width: 5%;
}

我知道有像以下

的css媒体查询

 @media only screen and (orientation:portrait)

您可以在纵向和横向之间切换方向，但我无法想到在两个方向之间放置任何东西，因为宽度和高度都需要保持100％才能正确显示？

它在我的ipad上正确显示，然后您更改方向并需要滚动（水平和垂直）。如果我保持方向并刷新页面，它会加载具有正确位置的页面。

无论如何使用css使用媒体查询来执行此操作，或者我将不得不深入了解一些JavaScript？我需要能够支持多种移动设备，从Android手机和平板电脑到ios手机和平板电脑。

Answer 1

仅供参考。高度100％仅延伸到视口的底部。无论如何，而不是使用方向尝试使用min-width和min-height媒体查询。并为不同的分辨率设置不同的断点。

/* 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 */
}

具有流体设计的多个片剂的筛选方向

1 个答案: