거의 모든 곳에서 멋지게 보이는 58바이트 CSS

5631 단어 webdevdesigncssbeginners
이 웹사이트를 만들 때 대부분의 디스플레이에서 보기 좋게 만드는 간단하고 합리적인 방법을 원했습니다. 최소화 기술을 세지 않고 다음 58바이트가 저에게 잘 맞았습니다.

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}


이것을 분해합시다 :

최대 너비: 38rem

it appears that the default font size for most browsers is 16px, so 38rem is 608px. supporting 600px displays at a minimum seems reasonable.



패딩: 2rem

if the display's width goes under 38rem, then this padding keeps things looking pretty good until around 256px. while this may seem optional, it actually hits two birds with one stone - the padding also provides sorely-needed top and bottom whitespace.



여백: auto

this is really all that is needed to center the page, because main is a block element under semantic html5.



핵심 통찰력: 이 시점에 도달하기까지 놀라운 반복 작업이 필요했습니다. 아마도 그것은 내가 "현대적인"웹 개발에 대해 아무것도 모른다는 사실을 말하거나, 내가 더 믿는 경향이 있는 것처럼 복잡한 세상에서 단순하게 유지하는 것이 얼마나 어려운지를 말해줍니다.

업데이트 1: 몇 가지 논의를 거쳐 모바일과 데스크탑 디스플레이 간의 만족스러운 절충을 위해 패딩을 1.5rem로 변경했습니다.

업데이트 2: ch unit이 제 관심을 끌었고 매우 마음에 듭니다! 이후 70ch/2ch 로 변경했는데 패딩이 조금 더 작다는 점(모바일에 좋은 점)을 제외하면 2바이트가 적고 거의 동일하게 보입니다.

어디에서나 멋지게 보이는 100바이트의 CSS(고급 버전)



이것은 대부분의 디스플레이에서 잘 보이도록 간단한 드롭인 CSS여야 합니다.

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}


이것을 분해합시다. 나는 내 자신의 논평으로 원본 텍스트를 수정했습니다.

최대 너비: 70ch

the "readable range" is usually 60-80 character widths, and CSS lets you express that directly with the ch unit.



패딩: 3em 1em

If the display's width goes under the max-width set above, then this padding prevents edge-to-edge text on mobile. We use 3em to provide top/bottom whitespace.



여백: auto

This is really all that is needed to center the page - applied on html, because Dan's site doesnt have a semantic tag and is more likely to exist in most sites. That the top tag centers itself relative to nothing is unintuitive, but thats how browsers do.



라인 높이: 1.75

Spacing between the lines to help increase visual clarity. Always leave line height unitless because reasons.



글꼴 크기: 1.5em

I've noticed that recent design trends and screen sizes have tended toward bigger font sizes. Or maybe I'm getting old. Prefer em or rem over px if you want to let users scale it.



일부 선택기가 있음을 보장하기 위해 :root 대신 <html>를 사용할 수 있지만 나에게는 너무 화려하고 추가 문자를 사용합니다 :)

선택적 100바이트 추가




h1,h2,h3,h4,h5,h6 {
  margin: 3em 0 1em;
}

p,ul,ol {
  margin-bottom: 2em;
  color: #1d1d1d;
  font-family: sans-serif;
}


참조


  • 58 Bytes of CSS to Look Great Nearly Everywhere
  • CSS Reference on MDN
  • CodePen

    • 코드펜

    캔버스가 있는 맞춤형 경품 휠
    Serializer 및 model 사용법에 대해 (def__str__)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage