当前位置: 首页 > 面试题库 >

宽度:100%和宽度:100vw之间的区别?

袁鸿畅
2023-03-14
问题内容

我必须在屏幕高度上安装iframe。显然,我希望宽度为100%,但是由于这种方法不起作用,因此我使用了100vh。但是像vw这样的vh并不完全是100%。在我的笔记本电脑中,通过镀铬虽然100%的宽度可以完美呈现而不需要水平滚动条,但vw大约可以增加一厘米。


问题答案:

vw和vh分别代表视口宽度和视口高度。

使用width: 100vw代替的区别在于width: 100%,虽然100%将使元素适合所有可用空间,但视口宽度具有特定的度量,在这种情况下,可用屏幕的宽度 包括文档边距

如果设置样式body { margin: 0 },则100vw的行为应与100%相同。

补充笔记

将其vw用作网站上所有内容的单位,包括字体大小和高度,将使网站始终与设备的屏幕宽度成比例显示,而不管其分辨率如何。这样可以非常轻松地确保您的网站在工作站和移动设备上都能正确显示。

您可以font-size: 1vwbodyCSS中设置(或任何适合您项目的大小),并且以rem单位指定的所有内容都会根据设备屏幕自动缩放,因此可以很容易地将现有项目甚至框架(例如Bootstrap)移植到此概念。



 类似资料:
  • 我必须在屏幕高度上安装iframe。显然,我想要100%的宽度,但,因为这不起作用,我使用100VH。但像大众这样的vh并不完全是100%。在我的笔记本电脑通过chrome虽然100%的宽度呈现完美不需要水平滚动条,大众有大约一厘米额外。

  • 我有两个面板,一个是边栏,100%高,100px宽(紫色),我还有一些按钮(橙色),然后我有一个右面板,顶部div是100%宽,100px高(绿色),这个面板包含3个右浮动按钮(灰色)。 现在在这个顶部面板下方,我有一个内容div,应该是剩余宽度的100%和剩余高度的100%(黄色),但是当您添加更多侧边栏按钮(橙色按钮)时,黄色面板会在底部插入一个白色边框,如果您调整浏览器窗口的大小,它也水平放

  • 问题内容: 当我有一个with时,它并不是100%: 现在,当您调整窗口大小时,会有一个水平滚动条,然后向右滚动,则背景消失了。在这种情况下如何保持背景? 现在,当您调整窗口大小并向右滚动时,您将不再看到背景。如何解决这个问题? 问题答案: 100%值是父级宽度或视口的100%。请参阅文档。

  • 问题内容: 我需要为iPhone / Android手机开发一些html页面,但是和之间有什么区别?我需要为不同的屏幕尺寸使用不同的CSS。 有什么不同? 问题答案: 是目标显示区域的宽度,例如浏览器 是设备整个渲染区域的宽度,即实际设备屏幕 这同样适用于和自然。

  • 问题内容: 我最近一直在尝试找出何时适合使用s。它们似乎比仅一个元素有用得多。实际上,内联块元素似乎能够执行块元素可以做的任何事情,但是要有一些额外的样式。 与的元素有什么区别吗?(除了一个更长的事实?) 问题答案: 您所说的完全正确:“内联块元素似乎能够执行块元素可以做的任何事情,但要有一些额外的样式。” 这主要是由于两者的共同点是它们都是块容器。 但是,有一个陷阱。 块框参与块格式化上下文,内

  • 我已经读了几篇flexbox教程,但我仍然无法使这个简单的任务发挥作用。 我怎样才能使红框达到100%的宽度? 代码: 样式: 谢谢! 更新1:Nishanth Shankar的建议,为包装器添加flex:1,flexDirection:'row' 输出: 代码: