ఏక్కడ రూపకల్పన చేయాలి: రెస్పాన్సివ్ టెక్స్ట్
CSS ద్వారా రెస్పాన్సివ్ రూపకల్పనను ఎలా ఉపయోగించాలను నేర్చండి.
హలో వరల్డ్
బ్రౌజర్ విండో పరిమాణాన్ని మార్చండి, ఫాంట్ పరిమాణం ఎలా స్కూలించిందో చూడండి.
రెస్పాన్సివ్ ఫాంట్ పరిమాణం
టెక్స్ట్ పరిమాణాన్ని మార్చడానికి ఉపయోగించవచ్చు vw యూనిట్ సెట్, దాని అర్థం 'వీక్షణ వెడల్పు వెడల్పు'.
ఈ రీతిలో, టెక్స్ట్ పరిమాణం బ్రౌజర్ విండో పరిమాణం తో అనుగుణంగా ఉంటుంది:
<h1 style="font-size:8vw;">హలో వరల్డ్</h1> <p style="font-size:2vw;">బ్రౌజర్ విండో పరిమాణాన్ని మార్చండి, ఫాంట్ పరిమాణం ఎలా స్కూలించిందో చూడండి.</p>
అన్నారోపణ:వీక్షణ వెడల్పు బ్రౌజర్ విండో పరిమాణం ఉంటుంది.1vw = వీక్షణ వెడల్పు వెడల్పుని 1% ఉంది. వీక్షణ వెడల్పు 50 సెంటీమీటర్ ఉంటే 1vw 0.5 సెంటీమీటర్ కు
ఫాంట్ పరిమాణాన్ని మీడియా క్వరీ ద్వారా మార్చండి
మీరు ప్రత్యేక స్క్రీన్ పరిమాణంపై కెల్పనా కెల్పనా ఫాంట్ పరిమాణాన్ని మార్చడానికి మీడియా క్వరీ ఉపయోగించవచ్చు:
మారుతున్న ఫాంట్ పరిమాణం.
/* 如果屏幕宽度为 601px 或更大，将 <div> 的 font-size 设置为80px */
@media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* 如果屏幕宽度为 600px 或更小，请将 <div> 的 font-size 设置为 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
相关页面
教程：CSS 字体
教程：CSS 媒体查询
