CSS에서 @media를 사용할 때 스타일을 넘는 스타일

그래서 나는 크게 싫은 문제가 있습니다. CSS에서 @media를 사용할 때 스타일을 넘는 스타일

#content .post-content .row .col-md-6 .box-top { 
    background: #714f46; 
    padding: 10px; 
    color: #fff; 
    text-align: center; 
    font-family: "custom-script"; 
    position: relative; 
    height: 52px; 
    font-size: 34px; 
    padding-top: 12px; 
} 

@media (min-width: 960px) { 

} 

@media (min-width: 768px) { 
} 

@media (min-width: 640px) { 
    #content .post-content .row .col-md-6 .box-top { 
    width: 453px; 
    } 
} 

@media (min-width: 480px) { 
    #content .post-content .row .col-md-6 .box-top { 
    width: 353px; 
    } 
}

지금 문제가 641px 이상 아무것도가 640px 규칙을 사용하는 것입니다 : 그래서 스타일 시트의 다음과 같은 유형이있다. 화면이 1920x1200 인 경우에도. 나는 원래 요소에 대해 정의 된 너비가 없기 때문에 그것을 생각합니까? 그게 전부 경우 경우, 내가 453px의 원래 요소에 폭을 때리는 :

#content .post-content .row .col-md-6 .box-top { 
    ... 
    width: 453px; 
}

그러나 폭이 1366px 때 문제가 있기 때문에 crhome 관리자에서, 자사의 거의 @media 규칙 같은 것입니다 우선 순위가 여전히 사용 방금 정의한 폭 대신에 640px 규칙을 사용하십시오. 이제 나는 대신 생각하고있다. (min-width: xyzpx) 나는 max-width을 사용할 것이지만 클라이언트가 원하는대로 부드럽게 축소하는 방식을 취하는 것으로 보이며, 미디어 크기 사이에서 점프하는 것을 원하지 않는다.

@media 규칙을 대체하려면 내 요소의 max-width이 453px이어야합니까?

#content .post-content .row .col-md-6 .box-top { 
    ... 
    max-width: 453px; /** or a min-width: 453px **/ 
}

는 기본적으로 제 질문은 다음과 같습니다

왜 페이지에서 다른 규칙을 무시 내 @media 규칙입니다. 이 경우 왜 640 요소의 너비를 사용하여 해당 요소의 원래 정의가 폭을 특정하지 않을 때 위의 모든 것에 적용됩니까?

그리고

왜 640 재에 새로운 폭을 정의 @media 규칙, 그것은, 창문 폭이 특히 1366px 말 것을 내가 요소의 원래 정의에 대한 폭을 지정할 때입니다 ?

출처

2014-12-11 SeekingTruth

및 사용한다는 것을 사용하여

,536,913,632 : 대신이 같은 min-width

의 max-width 10

/*========== Non-Mobile First Method ==========*/ 

    @media only screen and (max-width : 960px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 768px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 480px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (max-width : 320px) { 
     /*your CSS Rules*/ 
    }

하거나 모바일 첫 번째 방법를 사용하려면 다음 min-width하지만이 방법으로 사용해야합니다 아래

/*========== Mobile First Method ==========*/ 

    @media only screen and (min-width : 320px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 480px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 768px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (min-width : 960px) { 
     /*your CSS Rules*/ 
    }

는 내가 알고있는 것과는 조각입니다 당신이 찾고있는 무엇 :

#content .post-content .row .col-md-6 .box-top { 
 
    background: #714f46; 
 
    padding: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: "custom-script,arial"; 
 
    position: relative; 
 
    height: 52px; 
 
    font-size: 34px; 
 
    padding-top: 12px; 
 
} 
 
/*========== Non-Mobile First Method ==========*/ 
 

 
@media only screen and (max-width: 960px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 640px) { 
 
    #content .post-content .row .col-md-6 .box-top { 
 
    width: 453px; 
 
    } 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 320px) { 
 
    /*your CSS Rules*/ 
 
}

<div id="content"> 
 
    <div class="post-content"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <div class="box-top">Something 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

출처

2014-12-11 01:45:38 dippas

모바일 첫 번째 방법을 사용하여 480에 스타일 규칙을 배치하고 화면 크기에 상관없이 나를 위해 640을 사용합니다. 항상 480이 사용됩니다. 왜 이것이 될지 설명해 주시겠습니까? – SeekingTruth

바이올린을 만들어 잘못된 것을 말하고 달성하려고 할 수 있습니까? – dippas

미디어 쿼리의 순서를 바꾸어보십시오. 가장 작은 min-width 먼저.

귀하의 창 너비는 700px라고 말하십시오. 그런 다음 (min-width: 960px)과 (min-width: 768px)이 일치하지 않고 건너 뜁니다. 과 (min-width: 480px)이 블록 내의 일치하는 스타일은 CSS 파일에 표시되기 위해 적용됩니다. 그리고 나중에 스타일

p { color: green; } 
p { color: red; }

귀하의 p 색이 붉은 것 :, 예컨대을 이전 스타일을 재정의합니다.

이 라이브 예를 조금 더 명확 수 있습니다 : http://jsbin.com/yuqigedudi/1/edit?html,output 내가이 문제를 이해하는 것은 당신이 비 모바일 첫 번째 방법 적용 할 것입니다에서

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    /* Default color when no media queries bellow match. 
    In this our case when window width < 200px */ 
    p { color: black } 

    /* If window size >= 200px */ 
    @media (min-width: 200px) { 
     p { color: red } 
    } 

    /* If window size >= 300px */ 
    @media (min-width: 300px) { 
     p { color: orange } 
    } 

    /* If window size >= 400px */ 
    @media (min-width: 400px) { 
     p { color: blue } 
    } 
    </style> 
</head> 
<body> 
    <p> 
    Resize this frame and see my color change! 
    </p> 
</body> 
</html>

출처

2014-12-11 00:19:54

C 그게 왜 영향을 미칠지에 대한 설명을 해 주시겠습니까? 또한 전혀 아무것도하지 않습니다 ... – SeekingTruth

당신의 업데이트 된 게시물에 css로 보여 주듯이 미디어를 전환해도 작동하지 않습니다. 모든 미디어 쿼리 규칙 아래에 미디어 쿼리에 포함되지 않는 모든 스타일을 배치했는데 (CSS는 맨 아래로 내려갔습니다), 문제는 여전히 동일합니다. 480px의 @media에서 무언가를 정의하면 481+ 이상을 쓰는 대신에 붙어 있습니다. – SeekingTruth

이것은 여전히 저를 위해, 당신의보기 아래로, 그러나 나의 것은 작동하지 않는다. 덕분에 – SeekingTruth

CSS에서 @media를 사용할 때 스타일을 넘는 스타일

답변

관련 문제