Question

我知道Twitter Bootstrap可以在不同的屏幕上正常工作

但是，如何根据页面/屏幕尺寸将页面中元素的高度设置为特定高度？

我有一张地图，我需要根据屏幕尺寸采取不同的高度

保

Answer 1

您可以使用CSS3 Media Queries执行此操作。例如，你有这样的结构：

CSS样式：

/* This default styling works for large screen devices (All devices with resolution of 1200px or above), for example laptops */

#map > iframe{
  width: Your Value;
  height: Your Value;
}

/* This media query works for medium screen devices (All devices with resolution from 992px to 1199px), for example Computers */

@media (min-width: 992px) and (max-width: 1199px){

  #map > iframe{
    width: Your Value;
    height: Your Value;
  }  
}

/* This media query works for small screen devices (All devices with resolution from 768px to 991px), for example tablets */

@media (min-width: 768px) and (max-width: 991px){
  #map > iframe{
    width: Your Value;
    height: Your Value;
  }
}

/* This media query works for extra small screen devices (All devices with below resolution of 767px), for example Iphones, Smart Phones */

@media (max-width: 767px){
  #map > iframe{
    width: Your Value;
    height: Your Value;
  }
}

HTML标记

<div id="map">
    <iframe src="Link to the google map" width="Some Value" height="Some Value">
        
    </iframe>
</div>

只需从width

中删除height和<iframe>个html属性

Answer 2

我会使用媒体查询设置高度，即

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

更改每个媒体查询的高度

Answer 3

页面或屏幕尺寸不同。

如果vh符合您的兼容性requirements，您可以在媒体查询中使用vh。在某些情况下，您可能想要设置html，正文和其他元素。高度为100％左右，以便子元素可以从父元素继承高度。否则设置高度百分比不起作用。

编辑：如果你知道元素的大小，只需在媒体查询中将它们设置为高度值。

使用Twitter Bootstrap根据屏幕大小设置地图的高度

3 个答案: