css – 根据窗口宽度调整div大小

前端之家收集整理的这篇文章主要介绍了css – 根据窗口宽度调整div大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个奇怪的问题.在我的页面上,我有一个行星在一些重型星云的主要图像.我设置它所以最小宽度是1000px,最大是1500px.我的侧面逐渐消失,这对于更大的屏幕看起来很棒.我想尝试做的是当你在移动设备上查看它并且它切割宽度为1000像素时,我希望图像宽1300像素,居中并切割150像素在每一侧都让你看不到淡出,但是仍然可以放大是窗口的宽度变得更大,就像一个大的iMac一样,一旦你通过那个1300像素的宽度就会再次变得可见.

我最初的想法是在两边做一些带有负边距的东西,但是在保持最大和混合宽度的同时我无法使用它.

这是来自页面的特定代码段,虽然html和css就在那里供所有人查看,但您可以使用精细命令找到任何进一步查找的div ID.

<div style="position:relative;width:100%;">
   <div id="help" style="
      position:relative;
      z-index:1;
      height:100%;
      min-width: 1000px;
      max-width: 1500px;
      margin: 0 auto;
   ">
      <img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;">
   </div>
</div>

对此有任何想法,它非常接近我喜欢的方式,只需要一个小小的调整.

解决方法

CSS的视口单元

vw,vh
1vw =视口宽度的1%
1vh =视口高度的1%

这样,您就不必编写许多不同的媒体查询或javascript.请注意新人.

如果你喜欢JS

window.innerWidth;window.innerHeight;

猜你在找的CSS相关文章