JavaScript はレスポンシブ開発サンプルの共有に rem を使用します-jsチュートリアル-php.cn

JavaScript はレスポンシブ開発サンプルの共有に rem を使用します

小云云

リリース： 2018-01-15 09:05:15

オリジナル

1863 人が閲覧しました

この記事ではレスポンシブ開発のための JavaScript での rem の使用法を主に紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

昨夜、モールのコンピュータ版が完成し、今日はモバイル版の作成を急いでいます。モバイルサイトに関して最初に思い浮かぶのは、さまざまな携帯電話の幅に適応することです。以前、この種のWebサイトを運営していたとき、何も考えずにbootstrapを導入しました。しかし、前のプロジェクトを完了した後、ブートストラップは優れているものの、その中のさまざまなスタイルをほとんど使用しないことがわかりました。最終的に Web サイトをアップロードすると、圧縮後も容量が必要になることがわかります。大きな部分なので、今回はネイティブ書き込みとレスポンシブ開発を使用したいと思います (今でも少しは理解しています)。パーセンテージの方法:

名前が示すように、ページの要素のマージンとパディング、幅、高さなどはすべて % を使用して計算されます。CSS のパーセントの 100 は、親要素を指します。このような。子要素の幅が 50% の場合、親要素の幅は 100、子要素の padding-left は 50%、親要素の幅は 100、子の margin-top は 100 です。要素が 20% の場合、親要素の高さは 100 になります。したがって、本文のデフォルトの幅は画面の幅（PC のブラウザの幅を指します）になります。これは、単純なレイアウトのページにのみ適しています。複雑なページを実装します。

2. メディアクエリ:

これはcss3で与えられます。このメディアクエリの機能は、この問題を解決するために生まれました。メディアが異なれば、CSS スタイルも異なります。ここでの「メディア」には、ページサイズ、デバイスの画面サイズなどが含まれます。最も一般的に使用される形式は、

phone: @media screen and (max-width: 767px) {/style in mobilephone/ です。 }

pad : @media 画面と (max-width: 991px) と (min-width: 768) {/タブレット中スタイル/}

pc: @media 画面と (min-width: 992px){/Computer Medium Style/}

... (さらに多くのノードを設定することもできます)

メディアクエリを使用する場合は、各ピクセルに対応する適応効果があることを確認する必要があります。明らかに、より小さい幅の範囲を設定する必要があります。 css3 の単位は rem です:

rem は、ルートノード html の font-size 値をページ全体の基準サイズとして使用します。たとえば、では、1rem=10px; を行うにはどうすればよいですか?次に、ページがロードされるときに js を使用してウィンドウの幅 (ブラウザウィンドウの幅) $(window).width() を取得する必要があります。モバイルページを開発する場合、通常は最大幅を 640 ピクセルに設定します。これまでで最も幅の広い携帯電話で表示した場合、Web ページの両端が画面にぴったり収まることを保証します。小さな例を示します。

画面ズームの3つのPも同じ行に

html

<p class="container">
  <p class="box">1</p>
  <p class="box">2</p>
  <p class="box">3</p>
</p>

ログイン後にコピー

css

<style>
  html{font-size: 20px;}
  .container{
    max-width: 640px;
    border:1px solid red;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .box{
    float: left;
    width:10.6rem;
    //我这里设置html的font-size:20px;最大
宽为640px,即相当于640/20=32rem;一行有3个p，所以每个p宽10.6rem

你也可以像论坛里面讲的那样设置html的font-size：62.5%;因为浏览器默认像素16px;乘以62.5%之后为整数10px;方便计算

    height:10.6rem;
    border:1px solid #000;
    box-sizing: border-box;
  }
</style>

ログイン後にコピー

<script>
 window.onresize = window.onload = function () {
   var w = $(window).width();
   if(w<640){
     var size = 20*w/640;//640的时候
对应html的font-size为20，那么宽度为w是对应
的font-size可这么求
     $(&#39;html&#39;).css(&#39;fontSize&#39;,size+&#39;px&#39;);
   }
 }
</script>

ログイン後にコピー

があることに注意してください。小さな穴があるときこの小さなデモを Google Chrome で検証すると、最初はブラウザウィンドウが縮小するにつれて 3 つの P が縮小し、特定の値に達すると移動が停止することがわかります。その理由は、ブラウザがデフォルトで Google Chrome をサポートしているためです。 HTML の最小フォントサイズは 10 ピクセルです。この値より小さい場合、これは私がインターネット上で 2 時間近くかけて何度も試したときに遭遇した問題です。、しかし、私はまだそれを理解できませんでした、ついに、そのような非人間的な理由を見つけました