آموزش کامل واکنشگرا کردن قالب سایت و وبلاگ

آموزش کامل واکنشگرا کردن قالب سایت و وبلاگ

جستجو در تمام مطالب سایت

آمارگیر

  • :: آمار مطالب
  • کل مطالب : 724
  • :: آمار بازديد
  • افراد آنلاين : 1
  • بازديد امروز : 33
  • بازديد ديروز : 239
  • بازديد کلی : 158,802
آموزش کامل واکنشگرا کردن قالب سایت و وبلاگ

قالبی که ریسپانسیو باشد به تغییرات عرض صفحه نمایش واکنش نشان می دهد و در آن تغییراتی ایجاد می شود.
مثلا اگر صفحه با موبایل دیده شود برخی از اجزا جا به جا می شود و طراحی سایت تغییر می کند.
در طرح ریسپانسیو برای هر محدوده پیکسلی یک سری قوانین با CSS روی صفحه اجرا می شود که هدف از آن بهتر نمایش دادن سایت در آن عرض می باشد.
به صورتی که صفحه بهم نمی ریزد. در صفحه های موبایل و همچنین تبلت ها طرح نیاز به زوم کردن ندارد.
چرا باید طرح را ریسپانسیو کنیم ؟
با توجه به پیشرفت روز افزون تکنولوژی که هر روزه شاهد معرفی گجت های جدیدی در بازار هستیم و افزایش میزان استفاده کاربران از موبایل ها و تبلت ها مخصوصا در ایران، اگر احتمال می دهید که کاربران شما سایت یا انجمن شما را با موبایل و تبلت شان باز کنند باید طرح خود را ریسپانسیو نمایید.
چگونه باید صفحه را ریسپانسیو یا واکنش گرا کنیم ؟
ابتدا طرح را به صورت معمول مثل همیشه کدنویسی کنید و البته واکنش گرا بودن آن را مد نظر داشته باشید. 
مثلا مد نظر داشته باشید که نوبار شما قرار است در صفحات خیلی کوچک مثل صفحات موبایل به یک آیکن تغییر کند که با کلیک بر روی آن منو نوبار ظاهر می شود.
سپس کد زیر را باید در head قالب خود قرار دهید که به دستگاه می فهماند قالب باید هم عرض دستگاه لود شود.
برای اینکه تغییرات و اندازه دیوایس ها را بدانید می توانید اپ Dimensions را برای گوگل کروم را از آخر پست دانلود کنید.
در این اپ اندازه عمومی دیوایس ها وجود دارد و می توانید سایت خود را در آن وارد کرده و در عرض های مختلف ببینید.
قرار دادن کد متاتگ در بخش Head سایت :
 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

این متاتگ باعث می شود که به مرورگرهای تلفن همراه بفهمانید که این سایت برای نمایش در صفحات شما هم ساخته شده است.
بخش مربوط به فرم دهی قالب سایت :
ما یک کلاس اصلی داریم به نام container به عرض 960 پیکسل ، که داخل این کلاس ، کلاس های مربوط به header , Content , Footer  Sidebar قرار می گیرند .
عرض یا همان width به صورت زیر می باشد :
container : 960px
header : 960px
Content :650 px
sidebar : 245px
footer : 960px
چون اصول رسپانسیو کردن بدین صورت می باشد که باید با درصد کار کنیم.
پس باید بدانیم چطور باید بفهمیم عرض قسمت هایی header , Content , Footer , Sidebar به درصد چقدر می باشد ؟
نمی توان همین طور گفت که مثلا به Content بشود 70% ، مخصوصا اگر قالبی داریم که از روی یک فایل گرافیکی طراحی می کنیم.
برای اینکه بدانیم اندازه دقیق مثلا Content ما به درصد چقدر می باشد یک فرمول می باشد.
نحوه محاسبه فرمول :
container : 960Px و به درصد یعنی اینکه 100% کل محوطه قالب سایتمان.
کد HTML:
<style>
{;container {width:960px.
</style>
کلاس Header ما هم چون دقیقا هم اندازه عرض container می باشد به صورت زیر یاداشت می کنیم.
کد HTML:
<style>
    {;container {width:960px.
    {header {width:100%.
</style>
اکنون کلاس Content را بررسی می کنیم.
همانطور که گفتیم عرض container برابر است با 960 پیکسل ، و عرض Content ما نیز برابر با 650 پیکسل برای به دست آوردن درصد Content از فرمول زیر استفاده می کنم.
کلاس مورد استفاده / کلاس اصلی * 100
 
Content/container = ??? * 100 = add morde nazar
650/960=0.6770833333333333 * 100 = 67.70833333333333%
برای قسمت های دیگر هم به صورت بالا حساب کنید تا خودتان یاد بگیرید.
حتی به Margin-Left و یا margin-right هم همین طور باید محاسبه شود و عدد به درصد قرار داده شود.
بخش CSS3 media query
در این قسمت باید تعیین کنیم وقتی که صفحه نمایش ما به این مقدار رزلوشنی رسید به چه صورت سایت نمایش بدهد. 
برای اینکه ببینید سایتتان ببین در سایز های استاندارد و غیر استاندارد به چه صورت می باشد به روش زیر عمل کنید.
الف ) استفاده از سایت های آنلاین که سایت شما را در دیوایس های مختلف با رزولوشن های مختلف نمایش می دهدند
 
Responsive Design Testing
Mobile Responsive Design Testing
Testing responsive web design in various resolutions | ResponsiveTest
ب ) استفاده از امکانات خود مرورگر
برای راه دوم در مرورگر Firefox از منوی Tools گزینه Web Developer و سپس گزینه Responsive Design View انتخاب کنید.
در قسمت بالا سمت چپ چند یک DropDown وجود دارد که داخلش یک سری عدد نوشته شده است.
این اعداد اندازه های استاندارد Device ها هستند.
خودتان هم می توانید با Drog and Drop صفحه بزرگ یا کوچیک کنید.
بعد از اینکه رزلوشنی که وقتی قالب به اون رزلوشن میرسه ظاهرش خراب می شود پیدا کردید در انتهای کدهای CSS خود دستورات زیر را وارد می کنید.
کد HTML: 
 
@media screen and (max-width: 960px) {
.class {
background: #ccc;
}
{
این یعنی اینکه حداکثر عرض رزولوشن نمایشی 960 پیکسل بود بیاد به کلاس بکگراند بده.
یا اینکه به صورت زیر هم می توانیم بنویسم.
کد HTML: 
 
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
{
این یعنی اینکه حداقل سایز نمایش 600 پیکسل و حداکثر 900 پیکسل بود اینکارها را انجام بده.


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


برچسب ها : - - - - - - - - - - - - - - -


اولین و قدیمی ترین سامانه کنترل ، ردیابی و مدیریت موبایل خانواده در ایران
مدیریت و کنترل پیام های تلگرام، واتس آپ، لاین، وایبر، فیسبوک و ...
امکان کنترل و چک کردن مخاطبین، تماس ها و پیامک های دریافتی و ارسالی
موقعیت و مکان یابی لحظه ای و ردیابی خطی فرزندان و سالمندان بر روی نقشه
دارای مجوز رسمی از مرکز توسعه فناوری اطلاعات و رسانه های دیجیتال به شماره : 20113808
با پشتیبانی 24 ساعته و خدمات پس از فروش در سراسر کشور
نسخه های کاملا نامحدود (بدون تاریخ مصرف) و عدم پرداخت شارژ ماهیانه و سالیانه
بهمراه نصب در محل کار و منزل خریدار در تمام نقاط تهران

برترین مطالب سایت


موضوعات

✔ اس ام اس و پیامک
✔ پزشکی
✔ روانشناسی
✔ قالب و کدهای سایت ها و وبلاگ ها
✔ فرهنگ و هنر
✔ نرم افزار
✔ سلامت
✔ سرگرمی
✔ دنیای مد
✔ آرایشی و زیبایی
✔ آشپزی و تغذیه
✔ کودکان و والدین
✔ مذهبی
✔ کامپیوتر ، موبایل و اینترنت
✔ علمی
✔ ورزشی
✔ مجله خودرو
✔ امنیت
✔ گوگل
✔ پخش زنده تلویزیون و رادیو
✔ ویدیو
✔ لیست کامل میوه ها و خواص آن ها
✔ آدرس و تلفن های ضروری
✔ چیست
✔ آگهی ها
قویترین نرم افزار ردیابی ، مکان یابی و مانیتورینگ گوشی همسرتان ، کودکتان