En son web geliştirme öğreticiler

HTML Duyarlı Web Tasarımı


Web sayfası iyi bakmak ve cihazdan bağımsız olarak kullanımı kolay olmalıdır.


Duyarlı Web Tasarım nedir?

Duyarlı Web Tasarım, web sayfası tüm cihazlarda iyi görünmesini sağlar (desktops, tablets, and phones) .

Duyarlı Web Tasarım, yeniden boyutlandırma gizlemek, küçültmek, büyütmek ya da herhangi bir ekranda iyi görünmesi için içerik taşımak için CSS kullanarak ve HTML hakkındadır:


Kendi Duyarlı Tasarım oluştur

duyarlı bir tasarıma oluşturmanın bir yolu, bunu kendiniz oluşturmaktır:

Örnek

<!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>
Kendin dene "

W3.CSS kullanma

Duyarlı tasarım oluşturmak için başka bir yol gibi, duyarlı stil sayfasını kullanmaktır W3.CSS

W3.CSS kolay herhangi bir boyutta güzel görünmesi siteleri geliştirmek için yapar; masaüstü, dizüstü bilgisayar, tablet veya telefon:

W3.CSS Demosu

Bu duyarlı sayfayı yeniden boyutlandırma!

Londra

Londra İngiltere'nin başkentidir.

13 milyonun üzerinde nüfuslu bir metropol alana sahip İngiltere'deki en kalabalık kentidir.

Paris

Paris, Fransa'nın başkentidir.

Paris alanı 12 milyondan fazla nüfusu ile Avrupa'nın en büyük nüfus merkezleri biridir.

Tokyo

Tokyo Japonya başkentidir.

Bu Greater Tokyo Alanının merkezi ve dünyanın en kalabalık metropol alandır.

Örnek

<!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>
Kendin dene "

W3.CSS hakkında daha fazla bilgi edinmek için okumak W3.CSS Eğitimi .