23

メディア クエリに基づいてスタイルをインポートしようとしていますが、インポートが開始されません。スタイルをメディア クエリに直接配置すると、ページにレンダリングされます。

ライブ サイトへのリンクは次のとおりですhttp://update.techbasics.ca

これが、メディアクエリとインポートを含む私のstyle.cssです

デバッグに役立つ場合は、ワードプレスを使用しています。

@import url('base.css');
/******************************************************************
Site Name: Tech Basics
Author: Anders Kitson

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*****************************************************************
BASE CSS
*****************************************************************/

/*****************************************************************
MEDIA QUERIES
*****************************************************************/
@media only screen and (min-width: 480px) {
    @import url('min480.css');
  }
@media only screen and (min-width: 600px) {
     @import url('min600.css');
  }
 @media only screen and (min-width: 768px) {
  body {
    background: purple; } }
@media only screen and (min-width: 992px) {
  body {
    background: orange; } }
@media only screen and (min-width: 1382px) {
  body {
    background: url("../img/noisy_grid.png"); } }
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  @import url('base.css'); 
}

ここに min600.css があります (style.css ファイルと同じディレクトリにあります)。

header {
  text-align: left; }
  body{
    background: green;
  }
4

8 に答える 8

24

そのようなコードを試してください

@import url("/inc/Styles/full.css") (min-width: 940px);
于 2013-09-05T12:13:48.017 に答える
10

こんなの使ってた？

あなたは書ける：

@import url('path.css') (screen and min/max-width: 600px);

使用するときにパスを追加できます@import

または好き：

@import url(style.css) (screen and min-width:600px);
于 2013-07-15T08:48:12.357 に答える
3

MDN ステートは@importネストできず、を除く他のすべての宣言の前に@charset置く必要があります。

構文は次のとおりです。

@import url;
@import url list-of-media-queries;

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

于 2016-09-01T03:19:00.703 に答える
0

私は同じ問題を抱えていて、良い解決策を見つけずに検索した後、代わりにインポートされたcssにメディアクエリを移動することになりました。実際、すべてのスタイルシートは、適用されていなくてもダウンロードされます（CSSメディアクエリを参照）。

では、別々のファイルを持つことのポイントは何ですか？私にとって、それは物事を整理し続けます。あなたの例を使用して：

@import url(min480.css); /* min-width: 480px */
@import url(min600.css); /* min-width: 600px */

次に、min600.cssで：

/* min600.css */
@media only screen and (min-width: 600px) {
   header {
      text-align: left; 
   }
   body {
      background: green;
   }
}
于 2013-03-21T15:33:49.997 に答える
0

正常に動作します。ウィンドウのサイズを変更すると、色が変化することがわかります。画面上のメイン ウィンドウ (1920x1080) でわかるように、CSS ルール

body {
background: url("../img/noisy_grid.png");
}

style.css にある 37 ～ 38 行目が最初に発火するため、オレンジ色が見えません。CSS ルールを再配置してみてください

于 2013-02-18T21:20:26.547 に答える
0

真言

@import ('filename.css') mediaType and (feature: value);

例：

@import (responsive.css) screen and (min-width: 320px) and (max-width: 480px);

注意: CSS ファイルに @import を使用する場合、このファイルは<link>タグに添付しないでください。そうしないと、スタイルが機能しません。

于 2020-07-24T11:04:52.017 に答える
0

私の場合、最初にこのメタタグを html に追加する必要があります

 <meta content="width=device-width, initial-scale=1" name="viewport" />
于 2021-03-25T23:40:18.010 に答える