لینک کوتاه مطلب : https://hsgar.com/?p=4480

اصل و اساس ساخت وبسایت ریسپانسیو

ریسپانسیو یعنی اینکه وبسایت شما در هر جای دنیا روی هر مانیتوری با هر سایزی خوشکل باشد.

برای اینکار اولین کاری باید بکنید این است که در قسمت head کد زیر را اضافه کنید

اضافه کردن viewport

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

دومین کاری که باید بکنید این است که فرمول زیر را به خاطر بسپارید

تنظیم box-sizing

width + padding + border = actual width of an element
height + padding + border = actual height of an element

یعنی اینکه اندازه‌ای که شما برای یک عنصر می‌نویسید همیشه بیشتر از چیزی است که می‌نویسید برای رفع این مشکل باید از کد CSS زیر استفاده کنید

box-sizing: border-box;

پس در کدهای css تان یا همان قسمت استایل کد زیر را وارد کنید:

* {
  box-sizing: border-box;
}

استفاده از ویژگی float

کلا float می‌گوید که عنصر دربین محتوای بیرونیش در کجا قرار بگیرد. یکی از اصول ریسپانسیو این است که همیشه مقدار float را در سی اس اس مشخص کنید.

برادر این ویژگی clear است که در مواقعی که نمی‌خواهیم عنصر خاص نسبت به float عنصری که تعیین کردیم گردش بکنیم استفاده می‌کنیم.

برای دانستن بیشتر به سراغ لینک روبه‌رو بروید: https://css-tricks.com/all-about-floats/

یک ویژگی دیگری که باید بررسی کنید clearfix است.

تنظیم عرض و ارتفاع

ارتفاع و عرض را به جای پیکسل به صورت درصد تعیین کنید. یعنی می‌گویید عرض فلان باکسی چند درصد صفحه نمایش باشد. با استفاده از maxwidth‌ هم می‌توانید بگویید بیشتر از یک اندازه خاص آن تصویر یا باکس بزرگ نشود.

استفاده از تگ picture

با استفاده از تگ پیکچر می‌توانید بگویید که در هر مانیتور با سایزهای مختلف چه تصاویر نشان داده شود

 <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture> 

تعیین اندازه متن به صورت ریسپانسیو

برای این کار باید از چیزی مثل زیر استفاده کنید

 <h1 style="font-size:10vw">Hello World</h1> 

استفاده از ویژگی overflow

کلا می‌گوید که اگر عرض یک عنصری بیشتر از عرض صفحه نمایش بود چه خاکی روی سرش بریزم.

div.ex1 {
  overflow: scroll;
}

div.ex2 {
  overflow: hidden;
}

div.ex3 {
  overflow: auto;
}

div.ex4 {
  overflow: visible;
}

قانون @media

Change the background color of the <body> element to "lightblue" when the browser window is 600px wide or less:


@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

نکات دیگری که باید به خاطر داشته باشید

از margin ها برای ایجاد فضای دور عناصر استفاده می‌شود

از paddingها برای ایجاد فضای داخل عناصر استفاده می‌شود.

از بررسی ویژگی display غافل نباشید.

این لینک را ببینید: https://www.w3schools.com/css/css_align.asp

از تگ‌هایی مثل header ، footer , sidebar, main و امثالهم استفاده کنید البته این ربطی به ریسپانسیوی ندارد.

نگاهی به ویژگی position بیندازید.

ویژگی zindex هم گاهی وقت‌ها به درد می‌خورد ولی خوب ربطی به ریسپانسیو ندارد.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.