コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSメディアクエリが失敗した場合の対処方法

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

藏色散人
リリース： 2023-01-28 15:29:58
オリジナル
2315 人が閲覧しました

無効な 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 サイトの他の関連記事を参照してください。

関連ラベル：
css メディアからのお問い合わせ
ソース：php.cn
前の記事：jqueryのtoggle()メソッドは何に使うのでしょうか？ 次の記事：改行を強制しないCSS英語コードとは何ですか？
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
MySQL でグループ化してカウントするにはどうすればよいですか? 友人に送信され、削除されていないメッセージの合計数を抽出するクエリを作成しようとしています。これはテーブル構造のスクリーンショットです。 達成したい出力は次のとおりです。 idme...
から 2024-04-06 18:30:17
0
1
353
MySQL は複数のテーブルからデータを取得します 次の列を含む eg_design テーブル、および次の列を含む eg_domains テーブル、および次の列を含む eg_fonts テーブルがあります。 $domain_id に...
から 2024-04-06 18:42:44
0
2
479
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート