[css] the problem of setting the font-size to pixels of body element

2018. 7. 15. 16:28・Frontend/HTML, CSS

To set the font-size to pixels is very bad.

body { font-size:10px; }    /*very bad*/

for example, when they have bad sight and cannot see so good, then some people actually increase the default font size of their browser. The problem is that by doing so we actually override the browser font size setting that the user can manually change in the settings, and many people actually do that.

Now if we set the font to like, the 10 pixels as we did here, then we remove the ability for these people to see our website properly because they can no longer change the default font size.

Well, they can, but our root font-size will not be affected by that anymore.

It'll just be 10 pixels no matter what the user has a default font size so this is really bad, and that is why we're going to set over a font size to a percentage here.

Which will translate to a percentage of the font size given by the browser.

Now, the default font size, if the user doesn't change anything, which is the initial situation that we want, is 16pixels, so that's the absolute default, and that's a situation that we're counting on here.

body { font-size: 100%; }    /*16px; browser default font size*/


The result,
So, If we put 100% here, they would mean that the root font size would be 16pixels if the user doesn't change anything and if the user does change the default font size.

body { font size: 62.5%; }    /*10px*/
저작자표시 비영리 (새창열림)

'Frontend > HTML, CSS' 카테고리의 다른 글

[HTML] #1 Hypertext Markup Language  (0) 2021.10.08
[Sass] Architect : the 7 - 1 pattern  (0) 2018.07.20
[css] Inheritance In CSS  (0) 2018.07.13
[css] How UNITS are converted from relative to absolute(px)  (0) 2018.07.13
[css] How CSS Works? and what is Specificity?  (0) 2018.07.12
'Frontend/HTML, CSS' 카테고리의 다른 글
  • [HTML] #1 Hypertext Markup Language
  • [Sass] Architect : the 7 - 1 pattern
  • [css] Inheritance In CSS
  • [css] How UNITS are converted from relative to absolute(px)
dev.hyejin
dev.hyejin
  • dev.hyejin
    혜진의 개발자 성장블로그
    dev.hyejin
  • 전체
    오늘
    어제
    • 분류 전체보기 (89)
      • 2024 데브캠프 (2)
      • 회고 (1)
      • 이슈해결 (3)
      • 기초학습 (13)
      • Frontend (20)
        • JavaScript (3)
        • Git, GitHub (3)
        • HTML, CSS (14)
      • Backend (8)
        • Database (4)
        • Java (4)
      • CS (16)
        • Network (10)
        • Algorithm (6)
      • Eng (16)
      • Tips (5)
  • 인기 글

  • 태그

    box-sizing
    상대경로
    절대경로
    시간복잡도
    ER모델
    GitHub
    점근성능
    런타임
    객체
    border-box
  • hELLO· Designed By정상우.v4.10.3
dev.hyejin
[css] the problem of setting the font-size to pixels of body element
상단으로

티스토리툴바