1
좋아요, 그래서 요소가 특정 너비에 도달하면 @media 태그를 사용하여 사진을 대체하려고합니다. 원래 너비를 100 %로 설정했지만, 나는 그것이 최대 폭과 최소 너비로 변경 되었기 때문에 응답 성 문제를 일으킬 수 있다는 것을 읽었으나 어쨌든 여기서 코드는 변경되지 않습니다.@media 너비 : 100 %
참고 : 나는 크롬에 요소를 검사하고 .container는 다운 스케일링에 767px에 도달 한 것은 그래서 폭을 변경하지 않는 요소가 문제
body,html {
margin: 0;
height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1920px) {
.container {
min-width: 768px;
max-width: 1920px;
height: 100%;
background-image: url('https://images.pexels.com/photos/214519/pexels-photo-214519.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
};
};
@media only screen and (min-width: 300px) and (max-width: 767px) {
.container {
min-width: 300px;
max-width: 767px;
height: 100%;
background-image: url('https://images.pexels.com/photos/159146/train-cargo-bow-river-banff-159146.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
};
};<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container"></div>
</body>
</html>
매개체는 Maxwells.c 예 즉 그러나 목표는 사람이 아이폰을 사용하는 말을 들어, 그들은 'X'이미지를 가지고 것입니다 사실 @없는 요소 –
크기, 화면 크기입니다 데스크톱에있는 사용자는 'y'이미지가로드됩니다. 나는 화면 크기를 감지하고 CSS 크기를 기반으로 CSS를 편집하는 방법으로 미디어를 사용하고 있습니다. – bignate132
'화면 만 '대신'화면 '을 설정하려고합니다. 그리고 최소/최대 너비를 사용할 필요가 없습니다. 100 %를 사용할 수 있습니다. –