قالب وردپرس

افزونه وردپرس

آموزش وردپرس

دانلود قالب وردپرس,دانلود افزونه وردپرس,دانلود پوسته وردپرس

قالب وردپرس رایگان,افزونه وردپرس رایگان,پوسته وردپرس رایگان
روز تم
خانه / آموزش کدهای وردپرس / 4کلید برای داشتن سایتی کاملا ریسپانسیو و پاسخ گو
BB

4کلید برای داشتن سایتی کاملا ریسپانسیو و پاسخ گو

4کلید برای داشتن سایتی کاملا ریسپانسیو و پاسخ گوReviewed by ناصر دشتی on Feb 18Rating: 4.0

 

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

1) نمایش عکس هایی کاملا پاسخ گو:

Fluid images یا ایجاد عکس های سیال یکی از مهم ترین جنبه های طراحی سایت می باشد.کد های css خاصی بدین منظور به کار برده میشه که عکس های بزرگ،در کوچک ترین دستگاه های موبایل ،تبلت و…به بهترین کیفیت ممکن نمایش داده شن.

مثلا اگه سایز عکس شما 600 پیکسله،به طور خودکار سایز عکس روی 350 پیکسل تنظیم میشه و سعی می شه با بهترین کیفیت ارایه شه.

کد css زیر به شما این اطمینان رو می ده که عکس تا حد ممکن بزرگ و با کیفیت در سایت نمایش داده شه:

</pre>
img {max-width: 100%;}
<pre>

…………………………………………………………………………..

2) نمایش  ویدیو های پاسخ گوی Html 5

با کد زیر هر نوع ویدیویی که در سایت آپ شده  به صورت HTML و با کیفیت واقعی مطلوب به نمایش درمیاد.

</pre>
video {max-width: 100%height: auto;}
<pre>

………………………………………………………………………….

3) نمایش ویدیو های  پاسخ گوی یوتیوب

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

در سایت شما با بهترین کیفیت به وسیله ی کد css زیر ممکنه.کد زیر رو به فایل CSS قالب اضافه کنید.

</pre>
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;}.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
<pre>

……………………………………………………………………..

4) ایجاد جدول های html ونمایش پاسخ گوی آن ها:

ممکنه برای شما هم پیش اومده باشه که با موبایلتون در یه سایت مشغول جست و جو هستید و جدول های مربوط به سایت و صفحه اصلی به دستی به نمایش درنیان.مثلا جدول در وسط سایت باشه و نوشته های ستون اون کمی کنارتر از جای اصلی(مثلا تا حدودی خارج جدول) نمایش داده شه.برای حل این مشکل و نمایش کاملا ریسپانسیو ابتدا پیشنهاد می کنم جدول هارو به صورت Html قرار بدید.

کد html مربوط به جدول:

</pre>
<table><thead><tr><th>First Name</th><th>Last Name</th><th>Job Title</th></tr></thead><tbody><tr><td>James</td><td>Matman</td><td>Chief Sandwich Eater</td></tr><tr><td>The</td><td>Tick</td><td>Crimefighter Sorta</td></tr></tbody></table>
<pre>

………………

کد css مربوط به جدول برای استایل جدول:

</pre>
/* Generic Styling, for Desktops/Laptops */table { width: 100%; border-collapse: collapse; }/* Zebra striping */tr:nth-of-type(odd) { background: #eee; }th { background: #333; color: white; font-weight: bold; }td, th { padding: 6px; border: 1px solid #ccc; text-align: left; }
<pre>

……………….

پس از ساخت جدول نوبت به ارایه جدول می رسه که باید پاسخ گو و ریسپانسیو باشه.بدین منظور کد زیر رو در فایل مربوط به css درج کنید.

</pre>
@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {/* Force table to not be like tables anymore */table, thead, tbody, th, td, tr {display: block; }/* Hide table headers (but not display: none;, for accessibility) */thead tr { position: absolute;top: -9999px;left: -9999px;}tr { border: 1px solid #ccc; }td { /* Behave like a "row" */border: none;border-bottom: 1px solid #eee; position: relative;padding-left: 50%; }td:before { /* Now like a table header */position: absolute;/* Top/left values mimic padding */top: 6px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;}/*Label the data*/td:nth-of-type(1):before { content: "First Name"; }td:nth-of-type(2):before { content: "Last Name"; }td:nth-of-type(3):before { content: "Job Title"; }td:nth-of-type(4):before { content: "Favorite Color"; }td:nth-of-type(5):before { content: "Wars of Trek?"; }td:nth-of-type(6):before { content: "Porn Name"; }td:nth-of-type(7):before { content: "Date of Birth"; }:nth-of-type(8):before { content: "Dream Vacation City"; }td:nth-of-type(9):before { content: "GPA"; }t:nth-of-type(10):before { content: "Arbitrary
<pre>

………………………………………………………………………………………………………………………..

 

منبع: روز تم

 

 

باکس دانلود

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


قالب وردپرس پوسته وردپرس افزونه وردپرس آموزش وردپرس

پوسته وردپرس

خرید قالب وردپرس

قالب رایگان وردپرس

افزونه رایگان وردپرس

خرید افزونه وردپرس
آموزش رایگان وردپرس