html - 我的内容 在移动设备上缩小

Question

我正在尝试让我的内容文本在移动设备上缩小。我的页脚、页眉和表格会缩小，但隐私页面上的文字等不会。是否有捷径可寻。谢谢

.content {
border: 1px solid transparent;
margin: auto;
margin-top: 40px;
padding: 50px 0px 50px 0px;
width: 1000px;
}

.content a {
color: #0996f8;  
font-family: Sans,Helvetica,Arial,sans-serif;
font-size: 17px;
font-weight: 300;
line-height: 28px;
text-decoration: none;
}

.content a:hover {
color: #0996f8;  
font-family: Sans,Helvetica,Arial,sans-serif;
font-size: 17px;
font-weight: 300;
line-height: 28px;
text-decoration: underline;
}

.content p {
color: #221f1f;  
font-family: Sans,Helvetica,Arial,sans-serif;
font-size: 17px;
font-weight: 300;
line-height: 28px;
}

Answer 1

制作内容shrink您有多种选择。

First: @media only rule,

仅使用@media，您可以根据屏幕更改css width或 height ，因此您可以更改 font-size使内容适合，或使整个<p>较小的变化 width

仅带有@media 的示例 css 为:

@media only screen and (max-width 767px){.content p{font-size: 14px;}}

或我提到的任何其他 css 设置。

Second option:Setting a width for the <p> and use word-break

这并不比@media only 规则好，但它确实可以工作，你可以给<p>元素或其父元素 a width , 当内容放不下时，会另起一行。与 word-break: break-word;您可以确保它只会作为整个单词转到新页面，而不仅仅是一个字母一个字母地转到一个新页面。