@미디어 쿼리에서 작동하지 않는 스타일 가져오기

@미디어 쿼리에서 작동하지 않는 스타일 가져오기

미디어 쿼리에서 스타일을 가져오려고 하지만 가져오기가 트리거되지 않습니다 미디어 쿼리에 스타일을 직접 넣으면 페이지에 렌더링됩니다.

다음은 라이브 사이트 http://update.techbasics.ca 링크입니다.

미디어 쿼리와 Import에 관한 my 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;
  }

그런 종류의 코드를 시험하다

@import url("/inc/Styles/full.css") (min-width: 940px);

해결책은 다음과 같습니다.

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

이렇게 썼어?

다음과 같이 쓸 수 있습니다.

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

사용하면서 경로를 추가할 수 있습니다.@import

또는 다음과 같습니다.

@import url(style.css) (screen and min-width:600px);

MDN은 다음과 같이 기술되어 있습니다.@importnest 할 수 없으며, 이외의 모든 선언보다 앞에 와야 합니다.@charset.

구문은 다음과 같습니다.

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

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

정상적으로 동작합니다.창의 크기를 조정하면 색상의 변화를 볼 수 있습니다.화면의 메인창에 표시됩니다(1920x1080).CSS 규칙

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

style.css에 위치하여 37-38행에서 먼저 불이 나기 때문에 주황색이 보이지 않습니다.css 규칙을 다시 정렬해 보십시오.

저도 같은 문제가 있어서 좋은 해결책을 찾지 못하고 검색한 결과 미디어 쿼리를 Import한 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;
   }
}

진실된 진술

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

예:

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

주의: CSS 파일에 @import를 사용하는 경우 이 파일은 첨부되지 않습니다.<link>태그. 그렇지 않으면 작업 스타일을 지정하지 않습니다.

내 경우 먼저 이 메타 태그를 html에 추가해야 합니다.

 <meta content="width=device-width, initial-scale=1" name="viewport" />

언급URL : https://stackoverflow.com/questions/14943719/import-styles-not-working-in-a-media-query