ååºå¼çç½é¡µè®¾è®¡ï¼é¤äºå¸å±çåå以å¤ï¼è¿æåå·çæ¹åãé常使ç¨@mediaãæ¯å¦ï¼
h1 {
font-size: 48px;
}
@media (max-width: 767px){
h1 {
font-size: 36px;
}
}
以ä¸çCSSå¯ä»¥è®©ç½é¡µå¨è®¾å¤å±å¹å°ºå¯¸å°äº768pxçæ¶åï¼è®©h1çåå·ä»åå§ç48pxå为36pxãå¨å®é
çåºç¨ä¸ï¼å°¤å
¶æ¯h1ãh2ãh3ççè¿æ ·ç大æ é¢çåå·è®¾ç½®ï¼å
¶å®è¿æ¯æä¸ç¹ç¹çççµãå 为å¯è½éè¦é¢å¤å¤è®¾å®å 个@mediaç宽度ã
å±å¹å®½åº¦ä»1280pxã1024pxã768pxã640pxã480pxï¼ç´å°320pxï¼è·¨åº¦é常大ï¼ä¸ºäºä¿ææ¯è¾å®ç¾çæ¾ç¤ºï¼é常ä¼ç¨Screen Sizeä¹ç±»çæµè§å¨æ件ï¼æ¥æ¾ç¤ºä¸å宽度ä¸å¸å±çæ¾ç¤ºç¶åµãh1 æ ç¾å
ï¼å 为åå·å¤§ï¼åæ°ä¹æå¤æå°ï¼ä¸ºä¿é©èµ·è§ï¼ææ¶ä¼ä¸ºæ¯ä¸ç§å±å¹å®½åº¦é½å®å¶ä¸ä¸ªåéçåå·ï¼è¿æ ·ç¨æ¾éº»ç¦ã
æä¸ç§è§£å³çæ¹æ¡ï¼ç¨Viewportçæ¹æ³ã
%vw = %viewport width
æ们ç¨%vwæ¥å®ä¹åå·ï¼ä¹å°±æ¯è¯´ç¨å±å¹å®½åº¦çç¾åæ¯æ¥å®ä¹åå·ç大å°ãä¾å¦ï¼
h1 {
font-size: 2.5vw;
}
è¿æ ·ä¸æ¥ï¼æ 论å±å¹å®½åº¦å¦ä½ååï¼h1çåå·ä¼ä¿æå¨Viewport宽度ç2.5%ç大å°ã
温馨提示:内容为网友见解,仅供参考