1. 홈
  2. 질의 응답
  3. 다른 크기의 장치에 표시 할 수있는 스크롤 슬라이드 쇼에 대한 미디어 쿼리

다른 크기의 장치에 표시 할 수있는 스크롤 슬라이드 쇼에 대한 미디어 쿼리

2017-11-15 28 views
0

이미지가 1920x1080 모니터에서 960x540 픽셀의 기본 해상도로 표시되도록 스크롤 슬라이드 쇼에 대한 미디어 쿼리를 만들고 싶습니다. 하지만 1366x768 모니터에서는 768x432입니다. 미디어 쿼리에서 작은 화면에 대한 키 프레임의 재 계산 값을 연결하려고했지만 작동하지 않았습니다.다른 크기의 장치에 표시 할 수있는 스크롤 슬라이드 쇼에 대한 미디어 쿼리

내가 미디어 쿼리 또는 애니메이션으로 광범위하게 작업하지 않았기 때문에 누구나 도움이된다면 가장 감사 할 것입니다. 바라건대, 더 작은 장치를위한 슬라이드 쇼를 추가로 수정할 수있는 답을 추론 할 수 있습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
.wrapper_video_and_text { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
    padding-top: 0px; 
    justify-content: center; 
    } 
.container_video { 
    width: 55%; 
    margin-left: 100px; 
    } 
.wrapper_text { 
    display: flex; 
    width: 45%; 
    overflow: hidden; 
    min-height: 100%; 
    justify-content: center; 
    align-items: center; 
    } 
.video_text { 
    width: 50%; 
    font-family: "europa",sans-serif; 
    font-size: 150%; 
    letter-spacing: ; 
    color: black; 
    font-weight: 500; 
    line-height: 125%; 
    } 
.flex-container { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
    padding-top: 0px; 
    justify-content: center; 
    align-items: center; 
    } 
#css_slider { 
    width: 960px; 
    height: 540px; 
    overflow: hidden; 
} 
#slider_images { 
    width : 12480px; 
    height: 540px; 
    overflow: hidden; 
    /* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */ 
    animation: slide 36s infinite; 
    -moz-animation: slide 36s infinite; 
    -webkit-animation: slide 36s infinite; 
    -o-animation: slide 36s infinite; 
} 
#slider_images img { 
    float: left; 
} 
    @keyframes slide{ 
    0%{margin-left: 0px;} 
    4.7%{margin-left: 0px;} 
    7.7%{margin-left: -960px;} 
    12.4%{margin-left: -960px;} 
    15.4%{margin-left: -1920px;} 
    20.1%{margin-left: -1920px;} 
    23.1%{margin-left: -2880px;} 
    27.8%{margin-left: -2880px;} 
    30.8%{margin-left: -3840px;} 
    35.5%{margin-left: -3840px;} 
    38.5%{margin-left: -4800px;} 
    43.2%{margin-left: -4800px;} 
    46.2%{margin-left: -5760px;} 
    50.9%{margin-left: -5760px;} 
    53.9%{margin-left: -6720px;} 
    58.6%{margin-left: -6720px;} 
    61.6%{margin-left: -7680px;} 
    66.3%{margin-left: -7680px;} 
    69.3%{margin-left: -8640px;} 
    74%{margin-left: -8640px;} 
    77%{margin-left: -9600px;} 
    81.7%{margin-left: -9600px;} 
    84.7%{margin-left: -10560px;} 
    89.4%{margin-left: -10560px;} 
    92.4%{margin-left: -11520px;} 
    97.1%{margin-left: -11520px;} 
    100%{margin-left: 0px;} 
} 
    @-moz-keyframes slide{ 
    0%{margin-left: 0px;} 
    4.7%{margin-left: 0px;} 
    7.7%{margin-left: -960px;} 
    12.4%{margin-left: -960px;} 
    15.4%{margin-left: -1920px;} 
    20.1%{margin-left: -1920px;} 
    23.1%{margin-left: -2880px;} 
    27.8%{margin-left: -2880px;} 
    30.8%{margin-left: -3840px;} 
    35.5%{margin-left: -3840px;} 
    38.5%{margin-left: -4800px;} 
    43.2%{margin-left: -4800px;} 
    46.2%{margin-left: -5760px;} 
    50.9%{margin-left: -5760px;} 
    53.9%{margin-left: -6720px;} 
    58.6%{margin-left: -6720px;} 
    61.6%{margin-left: -7680px;} 
    66.3%{margin-left: -7680px;} 
    69.3%{margin-left: -8640px;} 
    74%{margin-left: -8640px;} 
    77%{margin-left: -9600px;} 
    81.7%{margin-left: -9600px;} 
    84.7%{margin-left: -10560px;} 
    89.4%{margin-left: -10560px;} 
    92.4%{margin-left: -11520px;} 
    97.1%{margin-left: -11520px;} 
    100%{margin-left: 0px;} 
} 
@-webkit-keyframes slide{ 
    0%{margin-left: 0px;} 
    4.7%{margin-left: 0px;} 
    7.7%{margin-left: -960px;} 
    12.4%{margin-left: -960px;} 
    15.4%{margin-left: -1920px;} 
    20.1%{margin-left: -1920px;} 
    23.1%{margin-left: -2880px;} 
    27.8%{margin-left: -2880px;} 
    30.8%{margin-left: -3840px;} 
    35.5%{margin-left: -3840px;} 
    38.5%{margin-left: -4800px;} 
    43.2%{margin-left: -4800px;} 
    46.2%{margin-left: -5760px;} 
    50.9%{margin-left: -5760px;} 
    53.9%{margin-left: -6720px;} 
    58.6%{margin-left: -6720px;} 
    61.6%{margin-left: -7680px;} 
    66.3%{margin-left: -7680px;} 
    69.3%{margin-left: -8640px;} 
    74%{margin-left: -8640px;} 
    77%{margin-left: -9600px;} 
    81.7%{margin-left: -9600px;} 
    84.7%{margin-left: -10560px;} 
    89.4%{margin-left: -10560px;} 
    92.4%{margin-left: -11520px;} 
    97.1%{margin-left: -11520px;} 
    100%{margin-left: 0px;} 
} 
@-o-keyframes slide{ 
    0%{margin-left: 0px;} 
    4.7%{margin-left: 0px;} 
    7.7%{margin-left: -960px;} 
    12.4%{margin-left: -960px;} 
    15.4%{margin-left: -1920px;} 
    20.1%{margin-left: -1920px;} 
    23.1%{margin-left: -2880px;} 
    27.8%{margin-left: -2880px;} 
    30.8%{margin-left: -3840px;} 
    35.5%{margin-left: -3840px;} 
    38.5%{margin-left: -4800px;} 
    43.2%{margin-left: -4800px;} 
    46.2%{margin-left: -5760px;} 
    50.9%{margin-left: -5760px;} 
    53.9%{margin-left: -6720px;} 
    58.6%{margin-left: -6720px;} 
    61.6%{margin-left: -7680px;} 
    66.3%{margin-left: -7680px;} 
    69.3%{margin-left: -8640px;} 
    74%{margin-left: -8640px;} 
    77%{margin-left: -9600px;} 
    81.7%{margin-left: -9600px;} 
    84.7%{margin-left: -10560px;} 
    89.4%{margin-left: -10560px;} 
    92.4%{margin-left: -11520px;} 
    97.1%{margin-left: -11520px;} 
    100%{margin-left: 0px;} 
    } 
    </style> 
    </head> 
<section class="flex-container"> 
    <div id="css_slider"> 
    <!-- Each image is 960px by 540px --> 
    <div id="slider_images"> 
     <img src="web_960_lg_edg_water.jpg" alt="water" /> 
     <img src="web_960_lg_edg_blue.jpg" alt="blue" /> 
     <img src="web_960_lg_edg_robins_egg.jpg" alt="robins egg" /> 
     <img src="web_960_lg_edg_23rd_st.jpg" alt="23rd st" /> 
     <img src="web_960_lg_edg_broken_guru.jpg" alt="broken guru" /> 
     <img src="web_960_lg_edg_i_will_miss_you.jpg" alt="i will miss you" /> 
     <img src="web_960_lg_edg_pants.jpg" alt="pants" /> 
     <img src="web_960_lg_edg_nose.jpg" alt="nose" /> 
     <img src="web_960_lg_edg_swirls.jpg" alt="swirls" /> 
     <img src="web_960_lg_edg_church_ave.jpg" alt="church ave" /> 
     <img src="web_960_lg_edg_network_reality_stars.jpg" alt="network reality all stars" /> 
     <img src="web_960_lg_edg_ports.jpg" alt="ports" /> 
     <img src="web_960_lg_edg_kline.jpg" alt="kline" /> 
    </div> 
    </div> 
     <div class="wrapper_text"> 
     <div class="video_text"> 
     <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p> 
     </div> 
    </div> 
</section> 
</html>

출처

2017-11-15 Barton Lewis

답변

0

나는 여전히 여기에서 배우기 때문에 시도 할 것이지만 미디어 쿼리와 호출하는 선택기의 속성을 정의해야한다고 생각합니다. 또한 요소들이 서로 겹치기를 원할 경우 부동 소수점을 제거하십시오.

이와 비슷한 방법으로 반복하십시오. 작동하는지 알려주세요. 감사합니다

/* Media Queries */ 
@media screen and (max-width: 432px) , screen and (max-height: 768px) { 
#slider_images { 
width: 1920px; 
height: 1080px;

}

출처

2017-11-15 04:32:58 SourPatchJunkie

+0

안녕, 답변 주셔서 감사합니다. 그러나 이미지는 여전히 작은 화면에 큰 형식으로 나타납니다. 이 문제를 파악하기 위해 일부 미디어 쿼리 자습서를 사용해야 할 수도 있습니다. 하지만 도와 줘서 고마워. –

+0

죄송합니다. 해결해 주셨으면합니다. – SourPatchJunkie

 관련 문제

  • 관련 문제 없음^_^