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

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

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

آمارگیر

  • :: آمار مطالب
  • کل مطالب : 265
  • :: آمار بازديد
  • افراد آنلاين : 2
  • بازديد امروز : 74
  • بازديد ديروز : 635
  • بازديد کلي : 9,419
آموزش کامل واکنشگرا کردن قالب سایت و وبلاگ

قالبی که ریسپانسیو باشد به تغییرات عرض صفحه نمایش واکنش نشان می دهد و در آن تغییراتی ایجاد می شود.
مثلا اگر صفحه با موبایل دیده شود برخی از اجزا جا به جا می شود و طراحی سایت تغییر می کند.
 
در طرح ریسپانسیو برای هر محدوده پیکسلی یک سری قوانین با 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 پیکسل بود اینکارها را انجام بده.


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


برچسب ها :

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


موضوعات

  • اس ام اس و پیامک
  • اس ام اس شهادت 1
  • اس ام اس خنده دار 1
  • اس ام اس ولادت 0
  • اس ام اس شب بخیر 0
  • اس ام اس عاشقانه 0
  • اس ام اس تبریک سال نو 1
  • پزشکی
  • گوش، حلق و بینی 16
  • زنان و زایمان 0
  • کودکان 0
  • دندان پزشکی 0
  • چشم پزشکی 0
  • اعصاب و روان 0
  • قلب و عروق 146
  • پوست و مو 1
  • جراحی پلاستیک و زیبایی 0
  • جراحی عمومی 0
  • گوارش و کبد 0
  • کلیه و مجرای ادراری 0
  • داخلی 0
  • عفونی 3
  • مغز و اعصاب 0
  • آلرژی 0
  • ارتوپدی 0
  • غدد، رشد و متابولیسم 0
  • ریه 0
  • خون و سرطان 4
  • عمومی 0
  • اجتماعی 0
  • آدرس و تلفن پزشکان 147
  • روانشناسی
  • مشاوره خانواده 3
  • تست روانشناسی 1
  • روانشناسی زناشویی 0
  • روانشناسی کودکان 0
  • برای زندگی بهتر 5
  • والدین موفق 0
  • فرزندان و امتحانات 0
  • آموزش های روانشناسی 2
  • قالب و کدهای سایت ها و وبلاگ ها
  • کد های کاربردی سایت و وبلاگ 1
  • آموزش کدنویسی 1
  • آموزش برنامه نویسی 1
  • قالب های وردپرس 0
  • افزونه وردپرس 0
  • تمام کد ها و ابزارهای سایت و وبلاگ 3
  • فرهنگ و هنر
  • شعر و ترانه 0
  • فرهنگ زندگی 0
  • تاریخ و تمدن 0
  • مناسبت ها در ایران و جهان 0
  • نرم افزار
  • نرم افزارهای اندروید 2
  • نرم افزارهای کامپیوتر 0
  • سلامت
  • بیماری ها و راه درمان 0
  • داروهای گیاهی و تب سنتی 16
  • رژیم درمانی 5
  • ورزش درمانی 0
  • ایدز و انواع اعتیاد 1
  • لاغری و تناسب اندام 2
  • سلامت بدن 8
  • پیشگیری و بیماری 1
  • سرگرمی
  • معما و تست هوش 0
  • داستان های جالب و خواندنی 0
  • دنیای ضرب المثل 0
  • دنیای مد
  • لباس و کیف و کفش 2
  • دکوراسیون و چیدمان 0
  • مد و مدگرایی 0
  • طلا و جواهرات 1
  • آرایشی و زیبایی
  • لوازم آرایشی 8
  • آرایش صورت 1
  • آرایش مو 0
  • سلامت پوست 1
  • سلامت مو 0
  • آشپزی و تغذیه
  • آموزش انواع غذاها 0
  • آموزش شیرینی پزی 0
  • انواع مربا و ترشیجات 0
  • خواص مواد غذایی 0
  • غذاهای رژیمی 0
  • نکات مهم آشپزی 0
  • نگهداری مواد غذایی 0
  • کودکان و والدین
  • سرگرمی کودکان 0
  • تعلیم و تربیت 0
  • خلاقیت در کودکان 0
  • بیماری های شایع کودکان 0
  • شعر و قصه کودکانه 0
  • تغذیه کودک 0
  • روانشناسی کودک 0
  • بچه های سالم 0
  • بهداشت مادر کودک 0
  • دانستنی های نوزادان 0
  • مذهبی
  • کتابخانه مذهبی 0
  • زندگی نامه بزرگان دینی 2
  • داروخانه معنوی 0
  • احادیث و سخنان بزرگان 0
  • اعمال مستحبی 0
  • احکام دینی 0
  • متفرقه دینی 0
  • کامپیوتر ، موبایل و اینترنت
  • اخبار تکنولوژی 1
  • گرافیک دستی و کامپیوتری 0
  • موبایل ، لپ تاپ ، تبلت 1
  • اختراعات جدید 0
  • ترفندهای کامپیوتری 0
  • ترفندهای اینترنتی 0
  • ترفندهای موبایل و تبلت 0
  • آموزش کامپیوتر 0
  • آموزش نرم افزارهای کامپیوتری 1
  • نرم افزارهای کامپیوتر 0
  • آشنایی با کامپیوترهای حرفه ای 0
  • آموزش های موبایل و تبلت 0
  • آموزش نرم افزارهای موبایل و تبلت 0
  • نرم افزارهای موبایل و تبلت 1
  • آشنایی با موبایل و تبلت های حرفه ای 0
  • متفرقه کامپیوتر ، موبایل و اینترنت 0
  • بررسی گوشی های موبایل 0
  • علمی
  • زندگی نامه شعرا و دانشمندان 0
  • چرا ، زیرا و چگونه 0
  • گزارشهای علمی 0
  • گیاهان ، حیوانات و آکواریوم 0
  • آیا می دانید ؟ 1
  • نوآوری و کشفیات علمی 0
  • رشته های تحصیلی 0
  • ورزشی
  • زیبایی اندام 0
  • درمان با ورزش 0
  • ورزش عمومی 0
  • تاریخچه رشته های ورزشی 0
  • ورزشکاران 0
  • مجله خودرو
  • دنیای خودرو 1
  • تصاویر وسایل نقلیه 0
  • بررسی انواع خودروهای سواری 5
  • امنیت
  • امنیت گوشی های هوشمند 2
  • امنیت لپ تاپ و کامپیوتر 0
  • امنیت اینترنت بانک ها 1
  • گوگل
  • وبمستر تولز 1