많은 요소에서! important를 사용해도 괜찮습니까? 이

Question

를 해결하지 어떻게하면 내 웹 사이트 (할당)의 응답에 대한 등등

@media (max-width: 360px), 
@media (max-width: 320px), 
@media (max-width: 768px), 

및 ...

있습니다. 먼저 max-width:360px 안에 CSS 코드를 넣은 다음 max-width:320px에 코드를 넣으면 크기 조정/여백/패딩 등을 변경하지 않습니다. 그것이 필요하기 전에 중요! 내 코드에서 중요한 많은 : "margin-left:240px !important;"을 사용하는 이유입니다. max-width:768px을 코딩하기 시작하면 사이징이 작동하지 않습니다. 이 문제를 해결하는 방법이 있습니까 ?? 내가 초보자가되도록 도와주세요.

@media (max-width: 320px) { 
.txtyourrest 
{ 
    font-size:20px ; /*will work*/ 
} 
} 
@media (max-width: 360px) { 
.txtyourrest 
{ 
    font-size:25px !important; /*will work*/ 
} 
} 
@media (max-width: 768px) { 
.txtyourrest 
{ 
    font-size:30px !important; /*wont work*/ 
} 
} 

Answer 1

시도가 사용하기 :

이

샘플 코드 등

@media (max-width: 320px) { 
    /* css rules */ 
} 

@media (min-width:321px) and (max-width: 360px) { 
    /* css rules */ 
} 

@media (min-width:361px) and (max-width: 768px) { 
    /* css rules */ 
} 

및 ...

편집 : 더 나은 모바일 작은 뷰포트 크기에서 시작 -fist 지원!

Answer 2

변경 주문 미디어 쿼리

@media (max-width: 768px) { 
 
    .txtyourrest 
 
    { 
 
     font-size:30px; /*wont work*/ 
 
     color:red; 
 
    } 
 
    } 
 
    
 
    @media (max-width: 360px) { 
 
    .txtyourrest 
 
    { 
 
     font-size:25px; /*will work*/ 
 
     color:blue; 
 
    } 
 
    } 
 
    @media (max-width: 320px) { 
 
    .txtyourrest 
 
    { 
 
     font-size:20px ; /*will work*/ 
 
     color:yellow; 
 
    } 
 
    }

<div class="txtyourrest"> 
 
for the responsiveness of my website(assignment) 
 
</div>

Answer 3

은 이상적으로는 사용하지 않습니다! 중요한 당신이하지 않는 한. 대신 미디어 쿼리를 계단식으로 계단식으로 활용하여 서로를 적절하게 "덮어 쓸"수 있어야합니다.

"최대 너비"쿼리를 사용하고 있으며 더 작은 값으로 구별하는 것이 가장 큰 숫자부터 시작하여 내려갑니다.

일련의 "최소 너비"쿼리를 사용하고 더 커질 때 뭔가를 구별하는 것이 가장 작은 숫자부터 시작하여 아래로 이동하십시오.

마지막으로 이들을 결합하여 만 "중간"쿼리를 대상으로 할 수 있습니다. 그것들과 함께, 크기가 동시에 발생하지 않으면 순서는 중요하지 않습니다.

예 :

p { 
 
    color: blue; 
 
} 
 

 
@media (max-width: 500px) { 
 
    /*Everything up to 500px*/ 
 
    #small { 
 
    color: purple; 
 
    } 
 
} 
 

 
@media (max-width: 400px) { 
 
    /*Everything up to 400px*/ 
 
    #small { 
 
    color: red; 
 
    } 
 
} 
 

 
@media (min-width: 300px) { 
 
    /*Everything bigger than 300px*/ 
 
    #big { 
 
    color: red; 
 
    } 
 
} 
 

 
@media (min-width: 400px) { 
 
    /*Everything bigger than 400px*/ 
 
    #big { 
 
    color: purple; 
 
    } 
 
} 
 

 
@media (min-width: 500px) { 
 
    /*Everything bigger than 500px*/ 
 
    #big { 
 
    color: blue; 
 
    } 
 
} 
 

 
@media (min-width: 400px) and (max-width: 499px) { 
 
    /*Everything between 400px and 499px, including those*/ 
 
    #between { 
 
    color: purple; 
 
    } 
 
} 
 

 
@media (min-width: 300px) and (max-width: 399px) { 
 
    /*Everything between 300px and 399px, including those*/ 
 
    #between { 
 
    color: red; 
 
    } 
 
}

<p id="small">Get Smaller</p> 
 
<p id="big">Get Bigger</p> 
 
<p id="between">Only Change for Some</p>

그냥 스 니펫을 여는 첫 있도록 "조각을 확장"을 클릭 한 다음 브라우저의 크기를 조정할 수 있습니다,이 코드에서 실행되는 미디어 쿼리를 보려면 그것을 확인하십시오.