在Safari中，vw单元中的Div和text不能一起调整大小
在Safari中，vw (viewport width) 是一种相对长度单位，它相对于视口的宽度进行调整。使用vw单位可以实现响应式设计，即元素的大小可以根据设备的屏幕宽度自动调整。
然而，在某些情况下，当我们尝试在Safari中使用vw单位来调整包含Div和文本的元素的大小时，可能会遇到一些问题。具体来说，当Div元素中包含文本时，文本的字体大小不会按照vw单位进行调整，而是根据px (像素)单位来呈现。这可能导致文本在不同设备上显示的大小不一致，破坏了一致性和响应式设计的目的。
为了解决这个问题，我们可以采取以下方法：
- 将Div元素和文本分开调整大小：可以使用媒体查询来针对不同的设备宽度设置不同的字体大小或Div元素的大小。这样可以确保Div元素和文本都能根据设备的宽度进行适当的调整。
- 使用rem单位代替vw单位：rem (root em) 是相对于根元素（通常是html元素）的字体大小进行调整的单位。通过将字体大小设置为rem单位，然后在根元素上设置一个基准字体大小，可以实现相对于设备宽度进行调整的效果。例如，设置根元素的字体大小为16px，则1rem等于16px。这样可以确保文本的大小与Div元素的大小保持一致。
总结起来，虽然在Safari中vw单位在调整包含Div和文本的元素大小时可能会出现问题，但通过分开调整大小或者使用rem单位替代vw单位，可以解决这个问题。这样可以保证在Safari中实现一致性和响应式的设计效果。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我有一个50vw的Div，里面有一个字体为2vw的文本段落。根据窗口大小的不同，单词的位置会有很大的不同。在Chrome中，它们保持相同的比例，但在Safari中，布局被打破。我不能控制每个用户的浏览器，但我需要保留布局。 我对不同的字体有不同的增长率。像Arial这样<em
浏览 34提问于2019-10-04得票数 0
回答已采纳
1回答
我正在寻找一个解决方案，将文本扩展到div的边缘。我不想在电视里有任何空白。这是我的div <p class="fit-text">TEST TEXT</p></div</em
浏览 3提问于2020-06-29得票数 2
回答已采纳
1回答
我正在尝试测试HTML输入和CSS单元。我有一个文本输入“合并”与一个按钮。我试图使提交按钮和输入保持成比例的页面大小。意思是，当我调整页面的大小时，高度和宽度不应该保持不变，应该按比例缩小。我使用CSS单元"vw“。问题是，当我将它们的高度和宽度设置为“(任意数字)vw”时，只对输入的进行正确的调整
浏览 1提问于2019-10-11得票数 0
回答已采纳
长方体通过关键帧动画(迭代次数: 1，填充状态:向前)从宽度: 10vw加宽到宽度: 20vw (最终关键帧)。动画结束后，该框在Safari中没有响应(在调整窗口大小时)。它可以在Chrome和Firefox中正常工作。 我已经尝试使用-webkit- prefix并拆分动画属性，但没有效果。我被迫在动画结束后使用js来更改CSS类(代码片段之后的代码)。 widen { width: 10
浏览 53提问于2019-10-11得票数 0
1回答
在Safari中，我认为应用于阴影DOM中元素的视口单元(如vw)实际上不会响应视口的更改。他们应该这样做吗？在下面的演示中，浅蓝色的<main>元素和危险条纹的<div>都将其宽度设置为50vw。在Chrome、Firefox、Edge和Opera中，这些元素的<em
浏览 28提问于2020-08-14得票数 0
我正在使用div中的图像。( div使用CSS大小为100vw和100vh。)在调整浏览器窗口较小的后，图像在 div外浮动。当我使浏览器窗口的变得更大时，图像在到达窗口的边缘之前会弹出。
结论:当I调整窗口时，内反射图像的
浏览 6提问于2021-08-12得票数 1
回答已采纳
3回答
我想我的问题实际上可以归结为:有许多不同的方法可以使文本响应，但为什么要使用一种而不是另一种？有没有一种最适合通用的方法，或者不同的技术有不同的用途？
浏览 8提问于2017-04-29得票数 0
我正在使用PostCSS 插件，我得到的生成代码如下： font-size: calc(28px + 20 * ((100vw - 320px) / 880));有谁知道为什么会这样吗？
编辑:我可能已经找到了罪魁祸首，似乎大众与calc的结合是我尝试的</
浏览 0提问于2016-05-06得票数 1
2回答
例如，当我在以下位置有一个图像时：它的高度会根据图像的宽度自动缩放(例如，当您调整浏览器窗口的大小时，您可以看到这一点)。有没有办法对html中的其他元素做同样的事情？
浏览 2提问于2013-10-21得票数 3
使用css { Resize :both;}调整表格单元格的大小，但不使用表格<table border="1" style="resize:both;"&g
浏览 3提问于2012-11-16得票数 10
回答已采纳
在我开始构建和设计导航菜单之前，一切都很顺利。看起来，我希望它在一个完整的浏览器窗口中，但是当调整大小以使其变小时，块元素开始变得比页面的其余部分更大，并且文本不会保持居中。我希望导航条与包含文本的页面的部分高度相同，因此我将所有内容都封装在<div>中，背景颜色为绿色，然后将包含右侧白色背景的div和左侧导航链接的div浮动。这是导航链接的HTML<
浏览 1提问于2019-02-09得票数 0
回答已采纳
8回答
我希望我的div中的文本与父div的%百分比比率保持相同的大小。也就是说，我希望我的文本具有50%的父母的font-size宽度。因此，当页面大小发生变化时，%中的文本总是保持相同的大小。"> </div>
<div</em
浏览 10提问于2015-06-07得票数 41
回答已采纳
5回答
相对于容器的字体大小
、、、、
我正在设计一个可以根据窗口大小进行自我调整的网站，我需要使文本大小相对于它的容器(一个div)。我搜索了一下css，发现这是不可能的。因此，我搜索了所需的每一段代码，并将其编译为以下代码： $(document).ready(function() {while(true) {
document.ge
浏览 2提问于2013-03-23得票数 1
回答已采纳
我正在尝试弄清楚如何包含最大字体大小值。现在，当Chrome浏览器的字体大小被更改为非常大时，我的文本离开了div的边界。我尝试使用clamp和min作为字体大小属性，但它们都不起作用。当您使用rem作为大小单位，但又不希望您的文本在浏览器文本字体大小被用户更改时离开div块边界时，您如何处理这些情况？ .text {
font-size:
浏览 15提问于2020-09-05得票数 0
1回答
当用户点击移动版本中的“汉堡包导航”时，无论他们选择什么项目，都会出现一个弹出窗口，而我的问题是弹出窗口不适合整个屏幕和滚动。当你向下滚动时，它会显示一个部分不是弹出窗口的一部分。当用户手机垂直定位时，它可以正常工作，因为我在媒体查询中的弹出式窗口中添加了“高度:100 in”。但是当用户的手机处于水平位置时，它就不能工作了。我什么都试过了，但我无法修复它。我增加了“位置:固定”，这似乎是有效的，但
浏览 1提问于2017-04-13得票数 4
回答已采纳
我需要调整我的标签p的字体大小(如vw)，基本大小为16px，与她的框调整大小成比例。在大众中，16px等于1.119vw，但这是宽度的100%；在我的例子中，我需要大众的50%。<div class="box">
<p> Re
浏览 20提问于2021-10-28得票数 0
2回答
我有一个页面，其中包含一个DIV，它保持一个纵横比。我在div中有一些文本，它在字体大小上使用VW，当页面宽度改变时，它会保持文本大小--这很好。但是当用户改变窗口高度时-我不能让它以相同的方式响应-因为大众和VH不能一起玩。
有没有什么CSS或Javascript技巧可以让它正常工作？理想情况下，如果用户在网站上更改浏览器大小，在飞行中？下面是
浏览 1提问于2016-10-11得票数 5
我正在ReactJs中构建一个组件，它在页面中的图像上显示一些文本。此文本在配置管理器应用程序中配置，该应用程序也是使用ReactJs创建的。我的问
浏览 3提问于2019-10-12得票数 0
2回答
我的网站上有下面的部分。问题是文本行没有响应。
这里是如何在一个13英寸的屏幕上显示：这里是如何在5,2“手机屏幕上显示： <div class="inner">
&l
浏览 4提问于2017-03-08得票数 2
我已经制作了我的网站，并将图标放置在桌面上，据我所知，它们非常适合桌面，但在移动设备上，它似乎与背景下的图标一起出现。Live version Pastebin to code：height:400px;vertical-align:middle;display:inline-block
浏览 0提问于2017-08-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
