[css] Chrome 기기 모드 에뮬레이션 미디어 쿼리가 작동하지 않음
어떤 이유로 장치 에뮬레이션 모드가 내 미디어 쿼리를 읽지 않습니다. 부트 스트랩으로 만든 내 사이트를 포함한 다른 사이트에서는 작동하지만 처음부터 사용중인 미디어 쿼리에서는 작동하지 않습니다 (미디어 쿼리 버튼을 클릭하면 버튼이 파란색으로 바뀌지 만 미디어 쿼리는 표시되지 않음). 아래 테스트 파일. 이것은 Chrome의 버그입니까, 아니면 파일에서 변경해야 할 사항이 있습니까?
<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
<title>MQ Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
h1 { color: red; }
h2 { color:blue; }
p { color:green; }
@media (max-width: 768px) and (min-width: 481px) {
h1 { color: green; }
h2 { color:red; }
p { color:blue; }
}
@media (max-width:479px), print {
h1,h2,p { color:black; }
}
@media print {
body { font-family: serif; }
}
</style>
</head>
<body>
<h1>I'm a first level heading</h1>
<p>I'm a paragraph.</p>
<h2>I'm a second level heading</h2>
<p>I'm another paragraph.</p>
</body>
</html>
답변
내 페이지에 메타 태그를 추가하여이 문제를 해결했습니다.
<meta name="viewport" content="width=device-width">
업데이트 (2019 년 12 월) :
다음과 같이 초기 배율과 최소 배율을 설정해야 할 수도 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
답변
받아 들여진 대답은 나를 위해하지 않았으며 또한 추가해야 minimum-scale=1했습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
답변
Chrome의 기기 에뮬레이션은 여전히 WIP입니다. 솔직히 말해서 너무 빨리 Chrome에 푸시했다고 생각합니다. Canary (Chrome 베타 브라우저)를 사용하여 에뮬레이션을 테스트 해보세요. Chrome보다 더 잘 작동합니다.
답변
나를 위해 작동합니다.
페이지의 헤드 섹션에 뷰포트 메타 태그를 넣으십시오. 예를보십시오 :
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
답변
코드에 다음 메타 태그를 포함하세요.
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>답변
화면 크기에 따라 동일한 규칙 집합에 대해 둘 이상의 구현이있는 경우 다음과 같은 사실을 알 때까지 동일한 문제가 계속 발생했습니다.
동일한 미디어 쿼리에 대해 최소 및 최대 너비를 모두 지정하여 후속 쿼리에서 덮어 쓰지 않도록합니다.
@media screen and (min-width:9px , max-width:9px) {
css.selector {
style rules gets applied : in this range of screen sizes ;
}
}
css.selector{
the other style get applied : starting from 10px ;
}
또는 모두에 대해 하나 이상의 중단 점을 설정하십시오.
@media screen and (min-width:9px) {
some styles get applied : starting from this point ;
}
}
@media screen and (min-width:99px) {
some styles gets applied : starting from this point ;
}
}
답변
