如何在最小化瀏覽器時縮小文本CSS

Question

我遇到了一個問題，每當我使瀏覽器變小時，文本保持不變並且不會變小。當瀏覽器變小時，如何讓文字變小？

請訪問http://jsfiddle.net/xiiJaMiiE/PjbHs/爲我的網站

.home { 
font-family:apple; 
position:relative; 
font-size:25px; 
color:black; 
top:20%; 
display:inline-block; 
} 

提前感謝！

Answer 1

這個CSS應該爲你工作...只需根據需要調整/刪除查詢中斷，並調整字體大小。

.home { 
font-family:apple; 
position:relative; 
font-size:25px; 
color:black; 
top:20%; 
display:inline-block; 
} 

    @media all and (min-width: 1281px){ 
    .home{font-size:25px;} 
    } 

    @media all and (min-width: 1025px) and (max-width: 1280px) {  
     .home{font-size:22px;} 
    } 

    @media all and (min-width: 769px) and (max-width: 1024px) { 
     .home{font-size:18px;} 
    } 

    @media all and (min-width: 481px) and (max-width: 768px) { 
     .home{font-size:16px;} 
    } 

    @media all and (min-width: 321px) and (max-width: 480px) { 
     .home{font-size:14px;} 
    } 

    @media all and (max-width: 320px) { 
     .home{font-size:14px;} 
    } 

Answer 2

正如提到以上，你需要的，如果你想

下面是基於手機屏幕尺寸例如更改字體大小（或基於瀏覽器/屏幕尺寸的任何其他CSS值）使用媒體查詢

// Work For All Other Screens Except the one which we redefine in bottom 
.home { 
font-family:apple; 
position:relative; 
font-size:25px; 
color:black; 
top:20%; 
display:inline-block; 
} 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

.home { 
font-size:20px; 
} 

} 

你只需要定義要改變瀏覽器，其餘全部值形成上面款式，只有改變字體大小改爲20 px屏幕大小320px的

保持我值ñ您需要在您的頁面中包含https://github.com/scottjehl/Respond等庫，以支持舊版瀏覽器

Answer 3

可以使用視口單元，但由於存在小錯誤，它需要少量的JS/JQ。

http://css-tricks.com/viewport-sized-typography/

http://caniuse.com/viewport-units告訴瀏覽器支持

Codepen Demo

CSS

p { 
    font-size:1vw; 
} 

JQ

causeRepaintsOn = $("p"); /* could include any text related tags */ 
$(window).resize(function() { causeRepaintsOn.css("z-index", 1); }); 

Answer 4

我強烈建議不要使用px作爲字體大小，因爲每個瀏覽器都有不同的標準字體大小。然而，還有一種替代方法可以在所有瀏覽器中爲您提供所需的結果，包括新舊。

CSS：

#px { 
font-size:25px; /*this was the size you want*/ 
} 

#percent { 
font-size:160%; /*this is what it is in % but give you the support for crossbrowser coding*/ 
} 

櫃面你想在這裏嘗試一下對你示區別的HTML

HTML：

<p id="px">HELLO</p> 

<p id="percent">HELLO</p>