html - CSS のピクセルとピクセル密度

Question

私はHTMLとCSSに非常に慣れていませんが、何かが5pxであると判断するときに、ピクセルの物理サイズは密度に依存するため、100 ppiの画面で5pxが300の画面よりも大きく見えることに気づきました。 ppi。

これは正しいですか? もしそうなら、これを仲介する方法はありますか?

Answer 1

絶対！通常、デスクトップでは、1 CSS ピクセル = 1 ピクセルです。モバイル デバイス (特に新しい高解像度ディスプレイを搭載したデバイス) は、頭の痛い問題を引き起こしています。私のお気に入りの回避策は次のとおりです。

(function() {
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    var content = 'initial-scale=';
    content += 1 / window.devicePixelRatio;
    content += ',user-scalable=no';
    meta.setAttribute('content', content);
    document.getElementsByTagName('head')[0].appendChild(meta);
})();

通常、これは body タグの最初の子として追加しますが、おそらく head タグに含める必要があります。このスクリプトは、ディスプレイのピクセル密度などに基づいてデバイスのスケールを変更し、1 CSS ピクセルを強制的に 1 ピクセルにします。

楽しみ！

Answer 2

さまざまなサイズの画面にさまざま@mediaなクエリを使用できるクエリを使用することもできます。css

さらに多くのCSS トリックを学ぶことができます

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

別の画面サイズ

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}