표시 할 응답 성 디자인 데이터 목록

테이블을 사용하여 웹 사이트의 데스크톱 버전에 테이블의 데이터 목록을 표시하려고합니다. 모바일 웹에서도 같은 것을 응축하고 싶습니다. 별도의 HTML 블록을 사용해야합니까, 아니면 모바일보기 용으로 현재 테이블을 변환 할 수 있습니까?표시 할 응답 성 디자인 데이터 목록

http://play.mink7.com/h/startupsradar/pending.html

는 내가 대답에 따라 코드를 수정

모바일 업데이트 에서 다음 목록보기를 좋아한다. 모든 아이디어를 한 블록으로 클릭 할 수있는 전체 목록으로 만들 수있는 방법은 무엇입니까?

출처

2012-07-29 Harsha M V

HTML table을 다른 렌더링으로 설정할 수 있습니다 (예 : 설정

table { display: block; } 
tr { display: table; } 
th, td { display: table-row; }

이렇게하면 완전히 수직으로 표시됩니다.

물론 세부 사항은 마크 업과 원하는 렌더링에 따라 다릅니다.

출처

2012-07-29 08:02:39

wow. 그것에 대해 결코 생각하지 않았다. 감사합니다. 이것이 사용되는 모든 실제 예제? –

이 같은 휴대용 특정 스타일 속성 media="screen and (max-device-width: /* whatever */)"를 사용하여 동일한 블록을 변환 할 수 있습니다

<link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)">

을 또는 당신은 당신의 스타일 시트 내부에 @media을 사용할 수 있습니다

@media only screen and (max-device-width: /* whatever */) { 
    /* Styles goes here */ 
}

Media Info

PS I 방금의 출처를 보았습니다. 10, 그들은 ipad.css 스타일 시트에 대해 스타일 시트 속성을 사용하고 있습니다.

출처

2012-07-29 07:39:11

을 찾을 수 있습니다. 제 질문이있었습니다. 그 목록 항목을 작성하기 위해 테이블을 사용해야합니까? 아니면 별도로 빌드해야합니까? –

'모바일보기 용 현재 테이블을 변환 할 수 있습니까? '예 확실히 할 수 있습니다. 핸드 헬드 특정 스타일 시트에 개별 스타일을 지정해야합니다. Jukka K. Korpela의 대답 –

나는 그렇게했다. 모든 아이디어를 한 블록으로 클릭 할 수있는 전체 목록으로 만들 수있는 방법은 무엇입니까? –

CSS3을 사용할 수있는 경우 media queries을 사용하면 다른 크기 및 장치에 대해 다른 스타일을 만들 수 있습니다. 이런 식으로 엄청나게 동적 인 사이트를 만들 수 있습니다.

출처

2012-07-29 08:00:23

일반적으로 테이블 데이터는 테이블 행의 경계를 벗어나는 원치 않는 길이로 테이블 행을 늘릴 수 있습니다. 휴대 기기를 다룰 때 px가 제한됩니다. 기존 CSS 스타일 시트의 사본을 만들고 사이트를 모바일로 전환 할 때 테이블의 최소/최대 너비를 약간 설정하여 수정할 수 있습니다.

max-width: __px; 
min-width: __px; 
etc.

또는 당신은

$('#tableName').css('max-width', '150px'); 
$('#tableName').append(div).css('max-width', '150px');

는 JS 버전이 가야 할 조금 까다로울 수있다, 당신이해야한다고 생각하는 CSS를 추가 모바일 사이트로 전환되는 경우에 JS 함수를 호출 할 수 있습니다 CSS에 대한 제한을 설정하십시오.

출처

2012-07-29 08:18:54

제안 할 수있는 미디어 쿼리가 반응 형 디자인을위한 최상의 솔루션입니다.

페이지 너비를 기반으로하는 간단한 코드를 알려 드리겠습니다.

여기 코드에서 브라우저 너비에 따라 파라 색상을 변경하는 미디어 쿼리를 사용합니다. 대신 style = display : none을 사용하여 숨기거나 브라우저 너비에 따라 내용의 크기를 변경할 수 있습니다.

<html> 
<head> 
<style> 
@media (max-width: 600px) { 
    #p1{ 
    color:red; 
    } 
} 
@media (max-width: 400px) { 
    #p1{ 
    color:blue; 
    } 
} 
</style> 

</head> 
<body> 
<p id="p1" media="(max-width: 800px)">Hi , This text colour change according to browser size.</p> 

</body> 
</html>

당신은 더 많은 튜토리얼에게 난 이미 그 일을하고 단순히 here

출처

2014-02-12 07:49:33

표시 할 응답 성 디자인 데이터 목록

답변

관련 문제