1
(내부 CodePen) :이 시차 효과에 반응하는 방법이 있습니까? 나는이 매우 간단한 템플릿으로 사랑에 빠졌어
은 내가이 모바일 장치에서 잘 보이게 만들 수 있는지 궁금 해서요. 나는 미디어 쿼리를 추가하여 시차 전체를 어지럽게 만들었다.
도움이 될 것입니다.
감사합니다.
당신이 codepen에있는 당신의 HTML의 설정에 다음을 추가하는 데 필요한 모든의
A
답변
3
먼저 (보통은 <head> 내부에이를 추가합니다.
<meta name='viewport' content='width=device-width'>
을 이제 당신은 당신이 작업을해야 반응에 대한 준비가 있음 가장 작은 뷰포트 (모바일 먼저)를 보는 방법을 알려주세요.
이 경우에는 em 고정 값이 아닌 너비가 80 %로 업데이트되었지만 동일한 로직이 margin-left 너비의 절반 음수.
#bannertext {
width: 80%;
position: fixed;
top: 20%;
left: 50%;
border: .5em solid #fff;
margin-left: -40%;
padding: 2em 0; }
작은 화면에서 작업 했으므로 다른 백분율 값이나 고정 값을 포함하여 중단 점을 설정하기 만하면됩니다. 이것은 단 하나의 추가 중단 점이지만,이를 사용자의 필요에 맞게 확장 할 수있는 방법을 알아야합니다.
@media screen and (min-width:30em){
#bannertext {
max-width: 24em;
margin-left: -12em;
}
}
덕분에 많은 사람! 매력처럼 일했습니다! – Marco