최신 웹 개발 튜토리얼

HTML 반응 형 웹 디자인


귀하의 웹 페이지가 좋아 보인다 및 기기의 종류에 상관없이 쉽게 사용할 수 있어야합니다.


반응 형 웹 디자인은 무엇인가?

반응 형 웹 디자인은 웹 페이지가 모든 기기에 잘 보이게 (desktops, tablets, and phones) .

반응 형 웹 디자인, 크기를 조정 숨기기, 축소, 확대, 또는 어떤 화면에서 잘 보이도록 컨텐츠를 이동하는 CSS를 사용하여 HTML에 관한 것입니다 :


자신의 응답 디자인 만들기

반응 형 디자인을 만들 수있는 한 가지 방법은, 스스로를 만드는 것입니다 :

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>
»그것을 자신을 시도

W3.CSS 사용

반응 형 디자인을 만들 수있는 또 다른 방법은 같은 대답하는 스타일 시트를 사용하는 것입니다 W3.CSS

W3.CSS는 쉽게 어떤 크기 예뻐요 사이트를 개발 할 수 있습니다; 데스크톱, 노트북, 태블릿, 전화 :

W3.CSS 데모

이 응답 페이지 크기를 조정!

런던

런던은 영국의 수도 도시입니다.

그것은 만 13 이상 주민의 수도권으로, 영국에서 가장 인구가 많은 도시입니다.

파리

파리는 프랑스의 수도입니다.

파리 지역은 12 개 이상의 백만명의 주민과 함께 유럽에서 가장 큰 인구 밀집 지역 중 하나입니다.

도쿄

도쿄는 일본의 수도이다.

그것은 수도권의 중심, 세계에서 가장 인구가 많은 대도시 지역입니다.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>

<div class="w3-container w3-orange">
  <h1>W3.CSS Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</div>

</body>
</html>
»그것을 자신을 시도

W3.CSS에 대한 자세한 내용은, 우리의 읽을 W3.CSS 자습서 .