CSSメディアクエリが失敗した場合の対処方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSメディアクエリが失敗した場合の対処方法

藏色散人

Jan 28, 2023 pm 03:29 PM

css メディアからのお問い合わせ

無効な CSS メディアクエリの解決策: 1. "@media screen and (max-width:768px){...}" などの構文を変更します。 2. HTML ヘッダーに必要なメタタグを追加します。 file; 3. 元の CSS ドキュメントの後にメディアクエリステートメントを配置します。

CSSメディアクエリが失敗した場合の対処方法

このチュートリアルの動作環境: Windows 10 システム、css3 バージョン、DELL G3 コンピューター

CSSメディアクエリは失敗しますか？

CSS @media メディアクエリが無効です

@media メディアクエリで記述された CSS スタイルが無効ですか?

1. 問題

@media メディアクエリで記述された CSS スタイルは、HTML では無効です。

2. 解決策

試行 1: 文法仕様 - 'and' と '('

@media screen and (max-width:768px){
    body {
       padding-top:150px;
    padding-bottom: 20px;
    }
}

ログイン後にコピー

試行 2: 環境 - HTML ヘッダーを確認するメタタグがファイルに追加されます

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/index.css">
  </head>

ログイン後にコピー

3 つ試してください: 優先順位 - 元の CSS ドキュメントの後にメディアクエリステートメントを配置します

body{
   padding-top:50px;
   padding-bottom:20px;
}
@media screen and (max-width:768px){
    body {
       padding-top:150px;
    padding-bottom: 20px;
    }
}

ログイン後にコピー

推奨学習: "css ビデオチュートリアル》

以上がCSSメディアクエリが失敗した場合の対処方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7433

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

ブートストラップリストでデフォルトスタイルを削除する方法は？ Apr 07, 2025 am 10:18 AM

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。

ブートストラップのレイアウト方法 Apr 07, 2025 pm 02:24 PM

Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップフレームワークを構築する方法 Apr 07, 2025 pm 12:57 PM

ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを＆lt; head＆gt;にリンクしますセクション。 bootstrap javascriptファイルを＆lt; body＆gt;に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。