請看下面的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!<button>Read more></button></p>
</body>
</html>
為什么第二段以縮小的字體顯示?如何關閉這種還原?
我注意到這個問題只出現在我手機上系統文本大小為L、XL或XXL的Chrome瀏覽器中。在Opera和Mi瀏覽器中,段落沒有問題,段落看起來是一樣的。
你可以給它一個類,然后按照你喜歡的方式改變它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
font-size: 16px;
}
.second_p{
font-size: 18px; /*or 18 anything you want*/
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!</p>
<p class="second_p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione eligendi optio sapiente cumque quidem ad nihil repellat, qui illum suscipit necessitatibus, officiis illo. Molestias voluptas libero ratione qui, ut quibusdam!<button>Read more></button></p>
</body>
</html>
16px已經默認在瀏覽器中,所以沒有使用font-size:16px; 嘗試使用不同的字體大小。
如果你想給所有的元素一個自定義的字體大小,你可以簡單地把它們的樣式設置成和你之前做的一樣。您可以嘗試不同的瀏覽器,看看那里是否也存在字體大小問題。 在這個特定的例子中,沒有必要給出16px作為字體大小,因為這是默認的大小。
上一篇vue多頁面預覽
下一篇vue好用的swiper