모바일에서 입력 버튼을 반응 적으로 만드시겠습니까?

그래서 페이지의 오른쪽에 위치해야하는 버튼이 있습니다. 그러나 사이트가 모바일에로드 될 때 로고의 가운데에 가운데 놓기를 원하지만 오른쪽으로 렌더링하지만 불완전하게 렌더링됩니다. 데스크톱에서는 왼쪽으로 렌더링됩니다. 여기모바일에서 입력 버튼을 반응 적으로 만드시겠습니까?

은 모바일에 모습입니다 : enter image description here 는

데스크톱 :

어쨌든

enter image description here

이를 달성하기 위해? 여기

.mainBanner input{ 
position: relative; 
left: 70%; 
    } 
#buttonPush{ 
height: 35px; 
width: 95px; 
background-color:#1abc9c; 
border: none; 
color: #fff; 
border-radius: 3px; 
font-size: 22px; 
border-bottom: 2px solid #16a085; 
/*position: absolute; 
left: 90%;*/ 


}

HTML 코드입니다 : 당신은 CSS3 미디어 쿼리를 사용할 필요가 들어

<header> 
<div class="mainBanner"> 
    <img id="mainLogo" src="img/logo.png"> 
    <!--POST BUTTON--> 
    <div id="buttonPost"> <form action="#openModal"><input id="buttonPush" type="submit" value="Post"></form></div> 
</div>

출처

2014-02-13 DwellingNYC

여기에 코드의 비트입니다.

이것을 사용하여 요소의 CSS 속성을 변경할 수 있습니다. 이제 크기가 조금 짧은 화면의 속성을 변경하려면

@media only screen and (max-width: 900px) { 
    // properties here.. 
}

: 다음은 일반적인 예입니다

@media only screen and (max-width: 300px) { 
    // properties here... 
}

이를 사용하여, 당신은 웹 사이트의 스타일을 변경할 수 있습니다 다른 화면 유형 및 크기. 화면이 모바일인지 데스크톱인지에 따라 테마를 변경할 수도 있습니다.

출처

2014-02-13 18:09:10

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries는 I 내가 .mainBanner 입력 넣어 CSS와 그 안에 { \t 놓으 @media 사용한 작동하는 것으로 보인다 : 상대적; \t 왼쪽 : 35 %; } 그리고 그것은 효과가 있었지만 이제 버튼이 데스크탑으로 확장 될 때 로고의 왼쪽 하단에 나타납니다. 어쨌든 이걸 고칠 수 있니? 나는 그것을 바르게 위치를 잡으려고 노력했다. 그러나 그 다음 이동 전화의 버튼은 전에 같지 않았다. – DwellingNYC

예.이 문제를 해결할 수 있습니다. 요소를 변경하려는 경우 요소의 위치 나 기타 속성을 변경하십시오. :) –

모바일에서 입력 버튼을 반응 적으로 만드시겠습니까?

답변

관련 문제