طراحی وب سایت واکنشگرا
طراحی وب سایت واکنشگرا باعث می شود صفحه وب در تمام دستگاه ها (دسکتاپ ها ، گوشی و تبلت هوشمند و …) نمایش مناسب داشته باشد .
استفاده از CSS و HTML برای تغییر اندازه، پنهان کردن، کوچک، بزرگ و یا حرکت محتوای آن برای نمایش مناسب بر روی هر صفحه نمایش :
نکته : یک وب سایت باید بدون در نظر گرفتن دستگاه ظاهر مناسب داشته باشد!
ایجاد طراحی واکنشگرا
یکی از راه های ایجاد یک طراحی واکنشگرا ، باید خودتان آن را طراحی و شخصی سازی کنید :
مثــال
<!DOCTYPE html>
<html lang=”en-us”>
<head>
<style>
.city {
float: left;
margin: 10px;
padding: 10px;
max-width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class=”city”>
<h2>tehran</h2>
<p>Tehran (/tɛəˈræn, -ˈrɑːn, ˌtɛhə-, ˌteɪə-/; Persian: تهران Tehrân [tʰehˈɾɒːn] (About this sound listen)) is the capital of Iran and Tehran Province. With a population of around 8.8 million in the city and 15 million in the larger metropolitan area of Greater Tehran</p>
</div>
<div class=”city”>
<h2>mashhad</h2>
<p>Mashhad (Persian: مشهد, Mašhad IPA: [mæʃˈhæd] (About this sound listen)), also spelled Mashad or Meshad,[3][4][5] is the second most populous city in Iran and the capital of Razavi Khorasan Province. It is located in the northeast of the country, near the borders with Turkmenistan and Afghanistan</p>
</div>
<div class=”city”>
<h2>Isfahan</h2>
<p>Isfahan (Persian: اصفهان, translit. Esfahān [esfæˈhɒːn] (About this sound listen)), historically also rendered in English as Ispahan, Sepahan, Esfahan or Hispahan, is the capital of Isfahan Province in Iran, located about 340 kilometres (211 miles) south of Tehran.</p>
</div>
<div class=”city”>
<h2>shiraz</h2>
<p>Shiraz (/ʃɪəˈrɑːz/ (About this sound listen); Persian: شیراز, Šīrāz, [ʃiːˈrɒːz] (About this sound listen)) is the fifth-most-populous city of Iran[1] and the capital of Fars Province (Old Persian as Pars). At the 2011 census, the population of the city was 1,700,665 and its built-up area with “Shahr-e Jadid-e Sadra” (Sadra New Town) was home to 1,500,644 inhabitants</p>
</div>
</body>
</html>
استفاده از W3.CSS
راه دیگر برای ایجاد یک طراحی واکنش گرا ، استفاده از یک فایل CSS مانند W3.CSS
W3.CSS به منظور توسعه سایت هایی که نمایش واکنشگرا در هر اندازه : دسکتاپ ، لپ تاپ ، تبلت و یا تلفن است .
نسخه ی نمایشی W3.CSS
تغییر اندازه در صفحه واکنشگرا!
<!DOCTYPE html>
<html>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://mramooz.com/w3css/9/w3.css”>
<body>
<div class=”w3-container w3-orange”>
<h1>W3CSS </h1>
</div>
<div class=”w3-row-padding”>
<div class=”w3-third”>
<h2>tehran</h2>
<p>Tehran (/tɛəˈræn, -ˈrɑːn, ˌtɛhə-, ˌteɪə-/; Persian: تهران Tehrân [tʰehˈɾɒːn] (About this sound listen)) is the capital of Iran and Tehran Province. With a population of around 8.8 million in the city and 15 million in the larger metropolitan area of Greater Tehran</p>
</div>
<div class=”w3-third”>
<h2>mashhad</h2>
<p>Mashhad (Persian: مشهد, Mašhad IPA: [mæʃˈhæd] (About this sound listen)), also spelled Mashad or Meshad,[3][4][5] is the second most populous city in Iran and the capital of Razavi Khorasan Province. It is located in the northeast of the country, near the borders with Turkmenistan and Afghanistan</p>
</div>
<div class=”w3-third”>
<h2>Isfahan</h2>
<p>Isfahan (Persian: اصفهان, translit. Esfahān [esfæˈhɒːn] (About this sound listen)), historically also rendered in English as Ispahan, Sepahan, Esfahan or Hispahan, is the capital of Isfahan Province in Iran, located about 340 kilometres (211 miles) south of Tehran.</p>
</div>
</div>
</body>
</html>
