scss : 고정 된 나란히 표시 할 버튼

Question

최근에 모바일 앱에 버튼을 추가했습니다. 그러나 버튼은 모바일 화면 크기에 따라 다르게 표시됩니다.

예를 들어 iphone 6+에서 실행하면 버튼이 아래 그림과 같이 나란히 표시되지만 iphone 4에 표시하면 두 번째 버튼이 옆에 표시되는 대신 아래에 표시됩니다.

응답 성을 높이기 위해 퍼센티지를 사용했는데, 분명히 내 웅덩이에 문제가있는 것 같습니다.

예를 들어, 화면 크기에 관계없이 이미지가 표시되도록 Outlook을 원합니다.

이

.IonFooter { 
     button { 
      width: 48%; 
      height: 60px; 
      border-radius: 5px; 
      font-size: 1.3em; 
     } 
} 

이

하여 버튼의 동작은 아마도 악명 높은 display: inline-block; 오른쪽 여백 "버그"에 의해 발생

Answer 1

(이 CSS Tricks article을 확인 미리 감사합니다 내 말대꾸 코드 문제에 대해). 또한 부모 요소의 패딩으로 인해 발생할 수 있습니다.

어쨌든 플렉스를 사용하면 버튼이 여러 행에 들지 않도록하는 것이 좋습니다.

.IonFooter { 
    display: flex; 
    justify-content: space-between; 

    button { 
     flex: 0 0 48%; // Grow: no, shrink: no, width: 48 % 
     height: 60px; 
     border-radius: 5px; 
     font-size: 1.3em; 
    } 
}