브라우저를 확대해도 텍스트가 같은 크기로 유지되지 않는 이유는 무엇입니까?

웹 사이트를 만들고 규모를 잘 만들려고하지만 텍스트의 크기가 같지 않습니다.브라우저를 확대해도 텍스트가 같은 크기로 유지되지 않는 이유는 무엇입니까?

예는 :

p { 
 
    width: 10%; 
 
    height: 10%; 
 
    background-color: rgb(0,0,0); 
 
    top: 50%; 
 
    left: 50%; 
 
    position: fixed; 
 
    color: rgb(255,255,255); 
 
    font-size: 175%; 
 
}

<!DOCType html> 
 
<html> 
 
    <head> 
 
    <title>:(</title> 
 
    </head> 
 
    <body> 
 
    <div><p>TEXT</p></div> 
 
    </body> 
 
</html>

이건 그냥 예입니다. 내가 어떻게하는지 정확히 모르겠다. div는 브라우저를 확대하거나 축소 할 때 상대적으로 동일한 크기가되지만 텍스트는 상자에 남아 있지 않은 것 같습니다.

출처

2017-03-07 BOBONA

-1

이전 대답 : 백분율 대신 em을 사용하십시오.

잘 확장하려면 CSS에 대한 상대 측정이 필요합니다. 그들과 퍼센트가 당신을 도울 수 있습니다.

당신은 텍스트 브라우저에도 불구하고 같은 크기는 당신이 사용 뷰포트 달성 할 수/아웃 확대되고 유지하려면 :

https://css-tricks.com/examples/ViewportTypography/

p { 
    font-size: 2vmin; 
}

그러나이 권장되지 않으며 형식을 vh, vw 및 vmin은 compabitilies 문제가 있습니다.

출처

2017-03-07 13:55:42 FrenchMajesty

도움이되지 않습니다 –

vh, vw 등을 사용하는 것은 좋지 않다고 생각하십니까? – BOBONA

@BOBONA 사용자가 확대/축소 설정을 텍스트로 변경 한 경우 페이지가 예상 한대로 응답하지 않기 때문에 이는 실수가없는 솔루션이 아닙니다. – FrenchMajesty

한 가지 방법은 사용하는 것입니다 속성을 텍스트 크기를 조정하지만, 그것은 단지 접두사의 지원으로 크롬과 가장자리의 최신 버전에서 작동 : 내가 픽셀의 모든를 지정합니다 결정

https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

출처

2017-03-07 14:16:26

오버플로를 설정하여 스크롤하십시오. 그런 식으로 누군가를 보더라도 똑같은 페이지를 볼 수 있습니다. 그들은 그것을 모두보기 위해 스크롤해야 할 수도 있습니다. 이 새로운 텍스트 속성을 모두 사용하는 브라우저가 더 많이 업데이트되면 이는 실용적이지 않을 수 있습니다.

출처

2017-03-07 23:26:27 BOBONA

브라우저를 확대해도 텍스트가 같은 크기로 유지되지 않는 이유는 무엇입니까?

답변

관련 문제