CSS3媒体查询 - 容器,而不是屏幕的宽度是多少?(CSS3 Media Query - Widt

2019-08-07 22:47发布

我还没有看到这个问题在这里问的,但如果有谁知道是否有可能有基于这是基于它的宽度容器或父元素媒体查询我想知道。 造成这种情况的用户情况是,当你从左侧弹出并降低了主窗口容器大小的菜单。 下面是一个例子网站,你可以看到屏幕上弹出菜单打开,但页面上的内容不能改变基于其新的宽度

http://tympanus.net/Tutorials/FullscreenBookBlock/

Answer 1:

我一直在寻找到这一点。 到目前为止,我一直印象深刻安迪·休谟的办法http://blog.andyhume.net/responsive-containers/ https://github.com/ahume/selector-queries/



Answer 2:

我想你想的东西比你问什么不同。

媒体查询是为了查询具体到你使用,不要做动画或其他视觉的东西的设备(媒体)的东西。

要重建你张贴在这里的例子是相当简单的重建,但(除外对于它的反应)无关,与媒体查询。

他们创造了一个正常的页面,有两种状态。 在一种状态下仅在内容是可见的,在其他状态下的菜单是可见的,并且内容是部分地(取菜单的宽度)移出屏幕。

您声明哪些元素和选项应该是过渡性的。 下面是一个例子,其中,I配置改变元件的宽度幅度将启动的动画这需要3秒:

div {
  transition: width 3s, margin 3s;
  -moz-transition: width 3s, margin 3s;
  -webkit-transition: width 3s, margin 3s;
  -o-transition: width 3s, margin 3s;
}

这两种状态之间的转换是通过添加一个CSS类完成,你看到动画被称为过渡 CSS3设置进行配置。

我建议你阅读像https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

FYI:我重建类似的网站,你表现,就像一个证明的概念: http://jsfiddle.net/W3PF4/



Answer 3:

不,你不能媒体查询方式,但你所要求的可以用CSS来完成。 我已经做了我的网站,并在球员帮助sitepoint了不少-看帖子11位置: http://www.sitepoint.com/forums/showthread.php?828454-CSS-Absolute-Positioning-Troubles&p= 5061986&viewfull = 1#post5061986

当侧边栏打开它squishes内容的权利和其内的内容中心。 当然,你可以用了定心内容做到这一点,它会做你打算什么。



文章来源: CSS3 Media Query - Width of container rather than screen?