に変換するpx -効果的なワークフロー

初心者のCSS開発者は、しばしばピクセル単位を使用しています.
しかし、このポストでは、PXの代わりにREMを使用するように説得しようとします.あなたがどのようなPXをレムに変換する利点が表示されます.

ピクセルの操作
あなたがフォントサイズからパディング、マージン、およびすべての距離までのすべてのピクセルを使用したWebページを構築したとしましょう.現在このページを応答させるために、あなたはそれらのすべてのサイズのためにメディア質問を定義します.
例えば.
CSS

body {
  padding: 30px;
}

.heading-primary {
  margin-bottom: 60px;
}

.text-primary {
  font-size: 60px;
  letter-spacing: 35px;
}

.text-secondary {
  font-size: 20px;
  letter-spacing: 17px;
}

.btn {
  padding: 15px 40px;
  border-radius: 100px;
  font-size: 16px;
}

メディアクエリ

@media all and (max-width: 600px) {
  body {
    padding: 15px;
  }

  .heading-primary {
    margin-bottom: 30px;
  }

  .text-primary {
    font-size: 30px;
    letter-spacing: 17px;
  }

  .text-secondary {
    font-size: 15px;
    letter-spacing: 8px;
  }

  .btn {
    padding: 7px 20px;
    border-radius: 100px;
    font-size: 10px;
  }
}

各フォントサイズ、パディング、マージン、および距離のためのメディアクエリを書いた.まあ、それは良いですが、私はあなたにすべてのサイズと長さに関連するものを適応させるためのより良い方法を表示することができますし、応答のメディアのクエリの1行に応答します.

REMでの作業
REMユニットは常にルートフォントサイズに関連します.rootのフォントサイズはHTMLセレクタに設定されます.
たとえば、ほとんどのブラウザのデフォルトのルートフォントサイズは16 pxです.したがって、1 remは16 px、2 remは32 px、3 remは48 pxなどである.
それで、我々が現在ルートフォントサイズをセットするならば、我々はREMに我々のページの他のすべての測定を変えることができて、非常に簡単に変えることができます.
remの計算に簡単に私たちのpxを維持するために、私は10 pxにルートフォントサイズを設定します.したがって、現在10 pxは1 rem、20 pxは2 rem、35 pxは3.5レムです.

Formula: rem = px / 10

したがって、すべてのPXユニットをREMに変えましょう.
CSS

html {
  font-size: 10px;
}

body {
  padding: 3rem;
}

.heading-primary {
  margin-bottom: 6rem;
}

.text-primary {
  font-size: 6rem;
  letter-spacing: 3.5rem;
}

.text-secondary {
  font-size: 2rem;
  letter-spacing: 1.7rem;
}

.btn {
  padding: 1.5rem 4rem;
  border-radius: 10rem;
  font-size: 1.6rem;
}

現在ページを応答させるために、あなたはすべてのサイズと長さ関連のもののためにメディア質問を定義する必要はありません.ちょっとメディア・クエリーとブームのルート・フォントサイズを定義してください、あなたは箱の中で適応可能で敏感なページを持っています.
メディアクエリ

@media all and (max-width: 600px) {
  html {
    font-size: 6px;
  }

このメディア質問を前のものと比較してください.
それです.すべてのサイズと長さは、したがって、すべてのあなたのサイズと長さがルートフォントサイズに依存するので、したがって、600 pxの下で減少します.

でルートフォントサイズを定義
PXでルートフォントサイズを定義するのは悪い習慣です.rootのフォントサイズを%で定義する必要があります.なぜ説明しましょう.
時々読者(ユーザ)は彼/彼女の読書の利便性のためのブラウザのデフォルトのフォントサイズを変更することがあります.したがって、リーダーが20 pxにデフォルトのフォントサイズを増加させる場合、それは10 pxであることによって定義されたルートフォントサイズを変更しません.
rootでフォントサイズを定義する必要があります.したがって、リーダーがブラウザのデフォルトフォントサイズを変更すると変更されます.
したがって、100 %のルートフォントサイズはブラウザのデフォルトフォントサイズ16 pxになります.しかし、それはあなたの計算を容易にするために10 pxになりたい.数学をしましょう.

16px = 100%
(16px / 16px ) * 10px = (100 / 16) * 10
10px = 62.5%

次に、ルートフォントサイズを10 pxから62.5 %に変更しましょう.
CSS

html {
  font-size: 62.5%;
  /* Default 100% is 16px. All rem will adapt accordingly if user changes browser font size. */
}

それで、それはこのポストのためでした.私は、私があなたにすべてのあなたのPXを変えるように説得することができたことを望みます.
https://woyiv.csb.app
あなたがこのポストを楽しむならば、あなたは確かにMy weekly NewsLetterを愛しています.
読書に感謝します.