Pagina dvs. de web ar trebui să arate bine și să fie ușor de utilizat, indiferent de dispozitiv.
Ce este receptivă Web Design?
Responsive Web Design face pagina web arata bine pe toate dispozitivele (desktops, tablets, and phones) - (desktops, tablets, and phones) .
Responsive Web Design este despre utilizarea CSS si HTML pentru a redimensiona, ascunde, micșora, mări sau mutați conținut pentru a face sa arate bine pe orice ecran:
Creează-ți propriul design receptivă
O modalitate de a crea un design receptiv, este să-l creați-vă:
Exemplu
<!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>
Încearcă - l singur » Utilizarea W3.CSS
O altă modalitate de a crea un design receptiv, este de a utiliza o foaie de stil receptiv, cum ar fi W3.CSS
W3.CSS face ușor de a dezvolta site-uri care arata frumos la orice dimensiune; desktop, laptop, tabletă sau telefon:
W3.CSS Demo
Redimensionarea această pagină receptiv!
Londra
Londra este capitala Angliei.
Acesta este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.
Paris
Paris este capitala Frantei.
Zona din Paris este una dintre cele mai mari centre de populație din Europa, cu mai mult de 12 milioane de locuitori.
Tokyo
Tokyo este capitala Japoniei.
Acesta este centrul Tokyo zona Greater, și zona metropolitană cel mai populat din lume.
Exemplu
<!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> Încearcă - l singur » Pentru a afla mai multe despre W3.CSS, citiți Tutorial W3.CSS .