응답 성있는 웹 사이트의 경우 픽셀 또는 백분율 값을 사용해야합니다.

Question

응답 성있는 웹 페이지 디자인을 목표로합니다. jquery에 처음 오셨습니까?

필자는 속성, 즉 높이, 픽셀 단위의 폭 또는 백분율에 값을 부여해야합니까? 나는 그 그러나 뭔가를 만들었습니다

이 탭에서 제대로 표시되지 않습니다.

Answer 1

백분율하지만 난 당신이 http://getbootstrap.com/

Answer 2

당신이 CSS 미디어와 함께 할 것입니다 체크 아웃하는 것이 좋습니다는 & 최대 폭 최소 폭을 조회합니다.

비율은 더 좋을 것입니다!

체크 아웃이 문서를 : http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

예 : 유체 디자인

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

Answer 3

백분율 도움,하지만 당신은 CSS 미디어 쿼리를 살펴 봐야 진정으로 반응합니다. 반응 형 디자인은 화면 크기와 같은 요인에 따라 레이아웃 (때로는 내용)을 변경합니다.

Answer 4

픽셀 기반은 소위 고정 레이아웃으로, 백분율 기반은 소위 유동 레이아웃이라고하며, 기반은 소위 탄성 배치라고합니다. 어떤 옵션이 귀하의 웹 사이트에 가장 적합한 지 고려해야합니다. 하지만 광산 선택은 탄력적 인 레이아웃이지만 어려운 일이므로 사이트의 유체 레이아웃을 선택하는 것이 좋습니다.

응답 성있는 디자인을 위해 저의 선택은 부트 스트랩입니다. 더 많은 프레임 워크를 온라인으로 검색 할 수 있습니다.

Answer 5

반응 형 웹 사이트의 경우 백분율 값을 사용하는 것이 좋습니다.

그러나 이미 개발자가 사용하기 쉬운 몇 가지 프레임 워크가있어 반응 형 웹 사이트를보다 쉽게 ​​만들 수 있습니다.

1. 해골 프레임 워크 : www.getskeleton.com [이 내가 사용]
2. 는 부트 스트랩 : getbootstrap.com
3. 960 그리드 시스템 :

당신은 수도를 960.gs 아래 몇 가지 우수한 응답 성 웹 사이트를 구축 할 때 이들 중 하나를 사용하십시오. 스크립트를 다운로드하여 웹 사이트의 폴더로 추출하십시오. css 파일과 js 파일을 각각의 폴더에 복사하고 index.html 링크 태그를 사용하여 호출하십시오.

본문이 종료되기 직전에 HTML 파일의 endy에서 javascript를 호출하는 것이 좋습니다.

시작 귀하의 웹 사이트에 대한 프레임 워크를 사용하고 나는 확실히 모든

행운을 고칠 것입니다! :)

Answer 6

percentage 또는 em과 같은 상대 단위를 사용해야합니다. Google em을 (를) 더 찾아보십시오.

반응 형이므로 미디어 쿼리를 사용해야합니다.

예 : 모든 창을 작은 화면에 세로로 쌓아두기를 원하면 (너비는 <, 가로 : 800px). 그렇다면 다음과 같이하면됩니다 :

.pane-selector{ 
    //Define style for widths > 800 px 
} 

@media(max-width: 800px){ 

    .pane-selector{ 
    width:100%; 
    //And whatever you wanna do 
    } 
} 

하지만! Twitter Bootstrap, Zurb 등의 사이트를 구축하는 데 사용할 수있는 프레임 워크가 많이 있습니다.이 프레임 워크는 기본 CSS 레이아웃과 UI 요소 및 구성 요소를 제공하는 완전한 CSS 프레임 워크입니다. 최소한의 CSS 레이아웃 스켈레톤도 있습니다. 구글과 당신은 짐을 발견 할 것이다.