휴대 기기 용 확장형 HTML5 웹 사이트를 디자인하는 방법은 무엇입니까?

확장 가능한 HTML5 웹 사이트 디자인이 필요합니다. 내 생각은 본문 요소에서 "기본"글꼴 크기를 1px로 정의하고 "em"에서이 값과 관련된 모든 자식 요소를 정의하는 것입니다.휴대 기기 용 확장형 HTML5 웹 사이트를 디자인하는 방법은 무엇입니까?

더 정확하게 : 하위 요소 (이미지, div 등)의 모든 크기 (너비, 높이, 여백, 여백 및 글꼴 크기)가 "em"단위로 정의되므로 전체 웹 사이트를 쉽게 확장 할 수 있습니다. "기본"글꼴 크기 (본문) 만 변경하면됩니다.

모바일 장치마다 화면 크기가 다르며 devicePixelRatio 값이 다르기 때문에이 작업을 수행해야합니다.

JavaScript를 통해 더 큰 화면 크기 (예 : 1.2 배)를 감지하면 본체 요소에만 font-size: 1.2px을 설정하면 전체 웹 사이트가 1.2 배 커야합니다.

예 :

<!doctype html> 
<html> 

    <head> 
     <title>foo</title> 

     <style> 
      body{ 
       font-size: 1px; 
       /* If a sceen is 1.2x bigger than this "default" size, then change font-size to 1.2px */ 
      } 

      #myimg{ 
       /* 200em = 200px in this case because body font-size=1px */ 
       width: 200em; 
       height: 200em; 
      } 

      #somediv{ 
       width: 100em; 
       height: 100em; 
       font-size: 20em; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <img id="myimg" src="foo.jpg"> 
      <div id="somediv"> 
       foo 
      </div> 
     </div> 
    </body> 

</html>

유일한 문제는 폰트 크기를 가지고 용기 (예 22em) 정의이 그들의 자식 요소에 대한 새로운 "기본"폰트 크기를 정의하므로이다 피해야합니다.

예 스타일 (발생하지해야합니다!)

#wrapper{ 
    font-size: 3px; 
}

을이 스타일이 위의 추가 된 것입니다 경우, 모든 자식 컨테이너 (및 자녀)이 될 것이다 큰 3 회 (=하지 내가 원하는) .

이 전체 아이디어는 실용적인 솔루션입니까 아니면 완전히 확장 가능한 디자인을 만드는 더 나은 방법이 있습니까?

출처

2012-05-29 Timo

모든 자식 요소를 분할하는 것입니다 형세". 이 작업을 올바르게 수행하는 방법에 대한 요령은 없으며 모든 좋은 조언이 아닙니다. 다음은 고정, 유동 및 탄성 레이아웃의 차이점에 대한 기사입니다. http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right- one-for-you/ –

-2

내 솔루션을 설명했는데 잘 작동했습니다. 나는 이것이 꽤 일반적인 관행 인 것 같다.

는

내가 변경하는 것이 좋습니다 유일한 것은 (대신 x 1 픽셀의) 10px의 기본 글꼴 크기를 사용하고 난 당신이 "탄성라고 무슨 말을하는지 생각 (10)

출처

2012-07-04 08:31:06 Timo

질문 주인이 이것을 정답으로 받아 들인 이유는 무엇입니까? plz는 –

를 제거합니다 Downvoter는 설명하게 걱정합니까? 나에게이 게시물은 내 질문에 올바르게 대답했다. – Timo

휴대 기기 용 확장형 HTML5 웹 사이트를 디자인하는 방법은 무엇입니까?

답변

관련 문제