移动响应上的 CSS 宽度问题答案

【问题标题】：CSS width issue on mobile responsive移动响应上的 CSS 宽度问题
【发布时间】：2022-01-19 10:15:56
【问题描述】：

想知道为什么关于文本和联系方式这两个页面的宽度不同。

它们都使用相同的样式，但一个窄一个宽。主要是在移动版本上注意到这一点，这让我抓狂。

https://genesisventuresinvestments.com/about.html

https://genesisventuresinvestments.com/contact.html

.dummy-dummy-text{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  padding: 0 20px;
  transform: translate(-50%, -50%);
}

【问题讨论】：

我认为问题在于电子邮件地址，它阻止了换行。你应该修改你处理white-space的方式。
@Benchy 我和你的想法一样，a标签里的邮件不会自动回一行，所以我们需要处理a标签的分词。我尝试使用 word-wrap: break-all; 并且它有效。
将这些属性添加到a标签。 word-wrap: anywhere; 用于 Firefox，word-wrap: break-word; or word-wrap: break-all; 用于 chrome，
但我希望它看起来像电子邮件一样宽。与顶部的窄版本相反。 @M.RMRF
看看这个答案，希望对你有所帮助。 stackoverflow.com/a/23777535/10749726

标签： html css responsive-design responsive

【解决方案1】：

我使用word-break: break-word 并且工作正常，但是我建议使用clamp() 来编辑字体大小作为最佳做法，这里有一些建议

h1 {
font-size: clamp(1.913rem, calc( 12px + 2.475vw ), 2.587rem);
line-height: 1.1;
}


h2 {
font-size: clamp(1.575rem, calc( 12px + 1.800vw ), 2.025rem);
line-height: 1.1;
}


h3 {
font-size: clamp(1.282rem, calc( 12px + 1.350vw ), 1.688rem);
line-height: 1.1;
}


h4 {
font-size: clamp(1.125rem, calc( 12px + 0.900vw ), 1.350rem);
line-height: 1.1;
}


p {
font-size: clamp(1.035rem, calc( 12px + 0.540vw ), 1.125rem);
line-height: 1.1;
}


span {
font-size: clamp(0.900rem, calc( 12px + 0.360vw ), 1.012rem);
line-height: 1.1;
}

【讨论】：

到主要部分还是响应部分？
到主要部分，clamp() 可帮助您使您的字体或容器响应，而无需编写媒体查询