ホーム>source

私は2つの異なるバージョンのWebサイトを作成しました。1つはラップトップ画面サイズ用で、もう1つはモバイル画面サイズ用です(途中でタブレット画面サイズ)。だから、ラップトップ用であると思われるものをメインのウェブページファイルとして持つために、javascriptを使用する方法を教えてもらえますか(javascriptを介して行うことができると思うので)ユーザーがモバイル経由で私のウェブサイトを開いた場合、開くファイルはモバイルサイズの画面用になります。あなたが私の質問を得ることを願っています。

事前にどうもありがとうございました!

PS:@mediaについて読みましたが、それでも解決しようとしています。 PS2:コードを投稿する必要がある場合は、必要な部分をお知らせください。喜んで投稿します。

あなたの答え
  • 解決した方法 # 1

    使用できますメディアクエリ 画面サイズに応じて、異なるCSSファイルをインポートします。 これはjavascriptなしでも機能し、私の意見では好ましいアプローチでしょう。

    サイトでは、ヘッダーのタグに次のコードを含めることができます。

    /* Everything 1000px and lower */ @import url("./mobile.css") only screen and (max-width: 1000px);

    これにより、メディアクエリが満たされた場合に別のスタイルシートがロードされます。

    メディアクエリの詳細については、こちらをご覧ください。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

  • 解決した方法 # 2

    使用するメディアクエリ CSSファイルで:

    @media screen and (max-width: 992px) {
      body {
        background-color: blue;
      }
    }
    @media screen and (max-width: 600px) {
      body {
        background-color: olive;
      }
    }
    
    

    例などはこちら

  • 解決した方法 # 3

    レスポンシブになると、JavaScriptをできる限り避け、CSSメディアクエリでそれを行うことができます。詳細については、こちらをご覧ください。 https://www.w3schools.com/css/css3_mediaqueries_ex.asp または、ブートストラップなどのフレームワークアプローチを選択できます。

  • 解決した方法 # 4

    ブートストラップを使用すると、要件をすばやく簡単に管理できると思います。 アイデアを得るために次のリンクを参照してください- https://getbootstrap.com/docs/3.3/css/

  • 解決した方法 # 5

    メディアクエリを使用して、WebページのCSSを処理できます。

    // iPadのポートレートとランドスケープの場合

    @media screen and (min-width: 768px) and (max-width: 1024px) {
    }
    
    

    // iPhoneおよびより小さいデバイス用

    @media screen and (max-width: 767px) {
    }
    
    

    また、javascriptを処理するには、jqueryでデバイス幅を使用する必要があります

    if ($(window).width() < 767) {
       alert('Less than 767');
    }
    else {
       alert('More than 767');
    }
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ Swift 4:1行の値でクラスを初期化する方法は?