草庐IT

viewport-vw

全部标签

html - 视口(viewport)元标记与媒体查询?

我很想知道,要针对平板电脑、台式机和智能手机优化您的网站,最好使用什么:媒体查询或视口(viewport)元标记?看代码:对比/*Smartphones(portraitandlandscape)-----------*/@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){/*Styles*/}/*Smartphones(landscape)-----------*/@mediaonlyscreenand(min-width:321px){/*Styles*/}/*Smartphones(port

html - 层数大于 100vw 的水平 CSS 仅视差效果

如何使用水平仅CSS视差效果引导网站?要求仅CSS视差父层必须有宽度/高度==100vw/100vh子层的宽度/高度必须>100vw/100vh子层必须在视觉上与父层宽度100%对齐现在子层在技术上确实有100%的父宽度,但由于perspective它们在视觉上似乎没有占据100%的父宽度子层(第一层除外)必须相对于其父层有一个顶部偏移结果必须基于计算以具有最大的灵active必须是跨浏览器可靠的(至少是最新版本的专业)到目前为止我做了什么其实这个问题是follow-upquestion.这是我当前模型状态的笔SASS或CSS.工作模拟示例(jQuery)在JavaScript中,实现

html - 层数大于 100vw 的水平 CSS 仅视差效果

如何使用水平仅CSS视差效果引导网站?要求仅CSS视差父层必须有宽度/高度==100vw/100vh子层的宽度/高度必须>100vw/100vh子层必须在视觉上与父层宽度100%对齐现在子层在技术上确实有100%的父宽度,但由于perspective它们在视觉上似乎没有占据100%的父宽度子层(第一层除外)必须相对于其父层有一个顶部偏移结果必须基于计算以具有最大的灵active必须是跨浏览器可靠的(至少是最新版本的专业)到目前为止我做了什么其实这个问题是follow-upquestion.这是我当前模型状态的笔SASS或CSS.工作模拟示例(jQuery)在JavaScript中,实现

html - 制作视口(viewport)的 div 中心 - 水平和垂直

这个问题在这里已经有了答案:Howtocenteranelementinthemiddleofthebrowserwindow?(18个答案)关闭3年前。我有一个我的整个网站内容将出现在其中的容器。我试图通过使用像margin:0auto;on#wrapper这样的css属性使div垂直和水平居中。.#wrapper{width:500px;height:500px;margin:0auto;background:#f7f7f7;}通过使用上面的css,我可以使div在屏幕的(顶部中心)但如何使它居中(垂直)。当我在Firefox中缩小时,我的div将在顶部中心缩小,但我希望它应该始终

html - 制作视口(viewport)的 div 中心 - 水平和垂直

这个问题在这里已经有了答案:Howtocenteranelementinthemiddleofthebrowserwindow?(18个答案)关闭3年前。我有一个我的整个网站内容将出现在其中的容器。我试图通过使用像margin:0auto;on#wrapper这样的css属性使div垂直和水平居中。.#wrapper{width:500px;height:500px;margin:0auto;background:#f7f7f7;}通过使用上面的css,我可以使div在屏幕的(顶部中心)但如何使它居中(垂直)。当我在Firefox中缩小时,我的div将在顶部中心缩小,但我希望它应该始终

HTML5 样板文件 : Meta viewport and width=device-width

我正在构建自适应/响应式网站。关于最近对HTML5BP的更改:"mobile/iOScssrevisions"我已经开始使用:...我的CSS中有这个:html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}当initial-scale=1包括在内,从垂直旋转到水平(在iPad/iPhone上)导致布局从2列(例如)更改为3列(由于meida查询,initial-scale=1和JSfixforviewportscalebug)。总结,在横向模式下,这会缩放页面:...而这不会:注意:您可以在查看HTML5BPwebs

HTML5 样板文件 : Meta viewport and width=device-width

我正在构建自适应/响应式网站。关于最近对HTML5BP的更改:"mobile/iOScssrevisions"我已经开始使用:...我的CSS中有这个:html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}当initial-scale=1包括在内,从垂直旋转到水平(在iPad/iPhone上)导致布局从2列(例如)更改为3列(由于meida查询,initial-scale=1和JSfixforviewportscalebug)。总结,在横向模式下,这会缩放页面:...而这不会:注意:您可以在查看HTML5BPwebs

html - 如何使 div 的百分比宽度相对于父 div 而不是视口(viewport)

HereistheHTMLIamworkingwith.我希望内部div占据其父div(外部)空间的50%。相反,它获得了视口(viewport)可用空间的50%,这意味着随着浏览器/视口(viewport)尺寸的缩小,它也会缩小。鉴于外部div的min-width为2000px,我希望内部div至少为1000px宽。 最佳答案 在节点上指定一个非静态位置,例如position:absolute/relative意味着它将用作其中绝对定位元素的引用http://jsfiddle.net/E5eEk/1/参见https://devel

html - 如何使 div 的百分比宽度相对于父 div 而不是视口(viewport)

HereistheHTMLIamworkingwith.我希望内部div占据其父div(外部)空间的50%。相反,它获得了视口(viewport)可用空间的50%,这意味着随着浏览器/视口(viewport)尺寸的缩小,它也会缩小。鉴于外部div的min-width为2000px,我希望内部div至少为1000px宽。 最佳答案 在节点上指定一个非静态位置,例如position:absolute/relative意味着它将用作其中绝对定位元素的引用http://jsfiddle.net/E5eEk/1/参见https://devel

iphone - 如何为正确处理旋转的 iPhone 设置视口(viewport)元?

所以我一直在使用:让我的HTML内容在iPhone上很好地显示。在用户使用之前效果很好将设备旋转到横向模式,其中显示仍然限制为320像素。是否有一种简单的方法来指定视口(viewport),该视口(viewport)会随着用户更改而改变设备方向?还是我必须求助于Javascript来处理? 最佳答案 我只是想自己解决这个问题,我想出的解决方案是:这似乎将设备锁定为1.0比例,无论其方向如何。作为副作用,它确实会完全禁用用户缩放(捏缩放等)。 关于iphone-如何为正确处理旋转的iPho