メディアクエリで特定のページを選択する方法はありますか？

別のCSSファイルを使用してサイトを作成しましたが、今ではそれらを結合したいと思います。問題は、メディアのクエリがhtml、h1、h2、h3の値が異なるため、すべてを1つのファイルにコピー＆ペーストすることができないことです。メディアクエリで特定のページを選択する方法はありますか？

連絡先ページのhtmlとh1を変更せずに、ホームクエリのhtmlとh1のみを選択するように、メディアクエリでページを指定する方法はありますか？

編集：これはWordpressカスタムテンプレートのため、すべてのページが同じヘッダーとHTMLの開始タグを共有します。

例：

がどのように私はこれらの2つのファイルを結合するのでしょうか？

index.css：

html { 
    font-size: 16px; 
} 

h1 { 
    font-size: 1.5rem; 
} 

@media only screen and (min-device-width: 700px) { 
    html { 
     font-size: 17px; 
    } 
    h1 { 
     font-size: 2rem; 
    } 
}

がcontact.css：

<html class="specific-page">

そしてCSSで：

html { 
    font-size: 18px; 
} 

h1 { 
    font-size: 1rem; 
} 

@media only screen and (min-device-width: 700px) { 
    html { 
     font-size: 19px; 
    } 
    h1 { 
     font-size: 1.5rem; 
    } 
}

出典

2016-12-23 Calisto

は、あなただけの代わりに...あなたのスタイルをより具体的にCSSクラスhttps://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors（またはID）を使用する必要がありますジェネリック 'html'と' h1' – Maxwelll

このようなこと特定のページにクラスを付与します。

@media only screen and (min-device-width: 700px) { 
    html.specific-page { 
     font-size: 19px; 
    } 
    .specific-page h1 { 
     font-size: 1.5rem; 
    } 
}

または：

だけではその特定のページに、この<link />を追加します。
またはその特定のページの<style>タグとして。

それはすでにあなたのテーマで使用されていない場合

出典

2016-12-23 20:52:53

ありがとう！しかし、私は何か言及するのを忘れていた：私はWordpressのカスタムテンプレートを作成しているので、すべてのページは同じヘッダーとを共有します。私はhtmlタグを選択せずにそれを行うことができる別の方法はありますか？ – Calisto

@Calisto WordPressでページレベルのスタイルを与えることができます。 '：）'そうでなければ、特定のページについて、 'document.body.parentNode.classList.add（" specific-page "）;' LoL。 '：D' –

こんにちは、ありがとう！:) – Calisto

あなたは体のクラスを使用することができます：あなたは、その後セットを持つことができます。これは、自動的にホームページ用など、ポスト、アーカイブを特定のクラスを追加します https://developer.wordpress.org/reference/functions/body_class/

グローバルに使用されているCSSルールのうち、他のページの特定のスタイルをすべて定義することができます。

body { 
    font-size: 16px; 
} 
h1 { 
    font-size: 1.5rem; 
} 

body.class-name { 
    font-size: 18px; 
} 
h1.class-name { 
    font-size: 1rem; 
} 

@media only screen and (min-device-width: 700px) { 
    body { 
     font-size: 17px; 
    } 
    h1 { 
     font-size: 2rem; 
    } 

    html.class-name { 
     font-size: 19px; 
    } 
    h1.class-name { 
     font-size: 1.5rem; 
    } 
}

出典

2016-12-23 21:35:23 nezhar

' body！== html' –

私は知っていますが、これはWordPressのベストプラクティスです。 https://css-tricks.com/why-use-classes-or-ids-on-the-html-element/#article-header-id-1 – nezhar

既に、WordPressは悪い習慣を '！important' OOとOOのPHPコンポーネントを混在させることです。 ;） –

メディアクエリで特定のページを選択する方法はありますか？

答えて

関連する問題