웹 글꼴의 적응형 조정
우리 홈페이지는 이전에 작성되었지만 적응형 페이지이므로 페이지를 줄여도 스타일상의 이유로 다른 장치의 글꼴 크기가 변경되지 않습니다. PC의 글꼴 크기 다양한 장치의 크기에 적응하려면 페이지 글꼴의 크기를 판단해야 합니다.
@media:
@media 쿼리를 사용하면 다양한 미디어 유형에 대해 다양한 스타일을 정의할 수 있습니다.
@media는 다양한 화면 크기에 맞게 다양한 스타일을 설정할 수 있습니다. 특히 반응형 페이지를 설정해야 하는 경우 @media는 매우 유용합니다.
브라우저 크기를 재설정하면 브라우저의 너비와 높이에 따라 페이지도 다시 렌더링됩니다.
/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
.tab-h2{
font-size: 26px;
}
.tab-p{
font-size: 16px;
}
.text h3{
font-size: 22px;
}
.text p{
font-size: 16px;
}
}
/*中等屏幕 大于等于992px*/
@media (min-width: 992px) {
.tab-h2{
font-size: 28px;
}
.tab-p{
font-size: 17px;
}
.text h3{
font-size: 24px;
}
.text p{
font-size: 18px;
}
}
/*大屏幕 大于等于1200px*/
@media (min-width: 1200px) {
.tab-h2{
font-size: 30px;
}
.tab-p{
font-size: 18px;
}
.text h3{
font-size: 26px;
}
.text p{
font-size: 19px;
}
}화면 해상도가 768px 이상, 992px 이상, 1200px 이상일 때 글꼴 단락의 크기를 조정했습니다. 이것이 바로 이 시대에 동일한 웹 페이지 레이아웃이 다른 장치에서 적절하게 표시될 수 있는 이유이기도 합니다. 화면 해상도가 다르면 내 웹 페이지의 글꼴 크기도 달라집니다.
이 장의 난이도
화면 해상도에 따라 글꼴 크기를 다르게 설정하세요
@media 사용
