レスポンシブ文字サイズ変更をCSSで実装する方法を詳しく解説

簡単に言うと、応答性とは、さまざまな表示デバイスで Web ページの閲覧エクスペリエンスを向上させることです。

@media 要素をラップする場合でも、バックグラウンドで userAgent を実行して別のページに戻り、ビューポートを使用してビューを制限する場合でも、またはルート要素の HTML 属性を使用してサイズなどを計算します。

どれも独自のプログラミング特性を備えたレスポンシブ レイアウトを実装できますが、どれが最適であるかは、まだニーズによって異なります。

次に、これらのレイアウトメソッドを実装する方法を簡単にリストしてみましょう。

有名な Bootstrap のフェンス レイアウトはメディア クエリの代表的なもので、要素を画面の幅に基づいて完全にラップして表示するかどうかを決定します。

<style><br>.col-xs-2 {width: 50%}
@media (min-width: 768px) {
  .col-sm-3 {width: 33.333333%}
}
@media (min-width: 992px) {
  .col-md-4 {width: 25%}
}
@media (min-width: 1200px) {
  .col-lg-5 {width: 20%}
}
</style>
 <p class="col-xs-2 col-sm-3 col-md-4 col-lg-5"></p>

表示装置は幅に応じて4つの間隔に分割されており、フェンスの比率に応じて各間隔に幅が与えられています。

しかし、モバイルインターネットの急速な発展とWebAppの使用に伴い、携帯電話の解像度とサイズはメーカーによって常に更新されているため、

768px以下の設計要件もそれに応じて増加しており、人々はレスポンシブな要件がいくつかありました。

例えば、iPhone4のテキストサイズはiPhone6にも適しているのか、Retina画面の1pxの問題、devicePixelRateと画面のスケーリングの問題など...

そこで、これらの問題を解決するために、非常に豊富なソリューションが作成されました。 、一つずつ見ていきましょう。

まず、画面が大きくなるにつれて、フォントサイズがどんどん大きくなり、それが良いようです。

html { font-size: 10px;}
@media (min-width: 376px) and (max-width: 414px) {
  html{font-size: 11px;}
}
@media (min-width: 415px) and (max-width: 639px) {
  html{font-size: 13px;}
}
@media (min-width: 640px) and (max-width: 719px) {
  html{font-size: 14px;}
}
@media (min-width: 720px) and (max-width: 749px) {
  html{font-size: 15px;}
}
@media (min-width: 750px) and (max-width: 799px) {
  html{font-size: 16px;}
}
@media (min-width: 800px) and (max-width: 992px) {
  html{font-size: 20px;}
}
body {
  margin: 0;
  font-size: 1.6rem;
}

実践してみると、iPhone6 plus での大きなフォントのエクスペリエンスは確かに悪くないことがわかります。

しかし、フォントが大きければ大きいほど見栄えが良くなるというわけではないようです。たとえば、iPad では、大きなフォントは視覚的に決して良いものではありません。

そこで、ルート要素のフォントサイズはwidthとdevicePixelRateによって計算されます。これは、上記の方法よりもdprを考慮して計算されます。

<style>
body {font-size: .12rem}
</style>
<script>
!function() {
  function e() {
    r.innerText = "html{font-size:" + (a.style.fontSize = a.getBoundingClientRect().width / o * d + "px") + " !important;}"
  }
  var t = navigator.userAgent,
    n = (t.match(/(iPhone|iPad|iPod)/), t.match(/Android/i), window),
    i = document,
    a = i.documentElement,
    o = (n.devicePixelRatio, 375),
    d = 100,
    r = (i.head.querySelector(&#39;[name="viewport"]&#39;), i.createElement("style"));
  r.innerText = "html{font-size:100px !important}", i.head.appendChild(r), e(), n.addEventListener("resize", e, !1);
  a.className += t.match(/ucbrowser/i) ? " app-uc " : ""
}();
</script>

font-size を直接 0.12 倍して設定しないのは、幅を計算しやすいためかもしれません。たとえば、3.75rem は画面幅です。

もちろん、幅を設定するためにパーセンテージの代わりに rem を使用することにはいくつかの利点があります。

たとえば、2 列のパーセンテージ レイアウトのギャップはパーセンテージのみにすることができます (計算は別の問題です)。その結果、左右および上下のギャップは不等になります。

要素のアスペクト比は直接完成させることができます。現在のレムはパーセントに非常に似ているので、数値を使用すると、自動的です

後で、ページを変更しないようにPC側でブラウザを拡大縮小する機能もあることを知りました。

さらに、淘宝網のアプローチである lib-flexible.js もあります。

!function(a,b){
function c(){
var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c
}
var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});
if(g){
console.warn("将根据已有的meta标签来设置缩放比例");
var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");
if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);
n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))
}
}
if(!i&&!j){
var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i
}
if(f.setAttribute("data-dpr",i),!g)
if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);
else{
var r=e.createElement("p");r.appendChild(g),e.write(r.innerHTML)
}
a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){
a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){
e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){
var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b
}}(window,window.lib||(window.lib={}));

10remは画面の幅という点では上記の方法と似ていますが、テキストの点では異なります

タオバオのタッチスクリーン版はフォントサイズを大きくしたくありません。より大きいですが、常に 12px または 24px です

しかし、結果から判断すると、小さな文字や写真のためのスペースを大きく残す方が、より洗練された雰囲気になるようです。また、PC 上のフォントが大きすぎる問題も解決します。上記のメソッドのバージョン。

さらに、この方法を使用する場合、@media は、淘宝網で使用される 10rem など、画面幅のノードを分割するために rem に依存する必要があります。

最後に、奇妙だが非常に効果的な応答方法について話しましょう。

<meta name="viewport" content="width=750,user-scalable=no" />
 
<style>
html, body {
  width: 750px;
  margin: 0 auto;
  overflow: hidden;
}
</style>

「聞かなくても構わない」という頑固さを感じたことはありませんか? この方法では、デバイスが何であれ、ビューサイズのデバイスとしてしか扱いません。 750ピクセル。

375px は画面の半分です。これは、H5 アプリケーションのシナリオに取り組んでいる人にとって朗報です。スプライト画像を作成するときに px の位置決めを使用するのは最も楽しいことですが、

その幅が狭いという欠点もあります。たとえば、iPhone 4 と iPhone 5 は幅が同じですが、高さが低いため、上から下への中央揃えのソリューションを追加するのが最善です。

以上がレスポンシブ文字サイズ変更をCSSで実装する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。