화면 크기에 따라 새로운 행으로 열 만들기, 웹 사이트 반응하기

Question

마지막 두 열을 새로운 행으로 이동하여 페이지를 반응 적으로 만들어야합니다. 어떻게 그것을 자바 스크립트에서 구현합니까? 친절하게 자바 스크립트 스 니펫을주세요. 현재 테이블

<table> 
    <tr> 
    <td>a</td> 
    <td>b</td> 
    <td>c</td> 
    <td>d</td> 
    </tr> 
    <tr> 
    <td>e</td> 
    <td>f</td> 
    <td>g</td> 
    <td>h</td> 
    </tr> 
</table> 

그건이 모바일 핸드 헬드 장치에 열 때

Answer 1

당신은 지나친중인 브라우저의 화면 크기를 조정하여뿐만 아니라뿐만 아니라 작동합니다

<table> 
    <tr> 
    <td>a</td> 
    <td>b</td> 
    </tr> 
    <tr> 
    <td>c</td> 
    <td>d</td> 
    </tr> 
    <tr> 
    <td>e</td> 
    <td>f</td> 
    </tr> 
    <tr> 
    <td>g</td> 
    <td>h</td> 
    </tr> 
</table> 

로 변경해야합니다입니다 이. 레이아웃에 table을 사용하지 마십시오. 테이블에 table을 사용하십시오.

웹 사이트 그리드의 경우 block elements과 같이 div 또는 section과 같은 것을 사용하십시오. 귀하의 경우 floating divs가 갈 수있는 방법 중 하나입니다.

CSS media queries과 기본 HTML 구조로 필요한 것을 얻을 수 있습니다. 실제로 필요하지 않은 경우 JavaScript를 사용하지 마십시오.