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

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

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

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

حالا اگه مایل باشید بدون هیچ وقت تلفی بریم سراغ آموزش :

نمایش تصاویر کاملا پاسخگو : دوستان از مهمترین جنبه های طراحی سایت Fluid images یا عکس های سیال بوده است که برای اینکار کدهای css زیادی بوده اند تا سایت با عکس های پاسخگو در هر سایزی داشته باشید حالا یک مثال بزنیم که مثلا تصویر شما 600 پیکسل بوده است و به صورت اتوماتیک عکس با کیفیت عالی روی 350 پیکسل تنظیم می شود

کدکاربردی وردپرس css زیر به شما این امکان رو می دهد تا تصاویر در بزرگ ترین اندازه بدون افت کیفیت نمایش داده شوند

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

نمایش ویدیو های پاسخگوی Html 5 : شما با کد زیر می تونید هر ویدیوی رو که در سایت دارید با کیفت واقعی و به صورت HTML  نمایش دهید

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

نمایش دادن ویدیو های یوتیوب به صورت پاسخگو : سایتهایی مشهور چون یوتیوب دارای طرفداران زیادی بوده اند و باعث شهرت سایت شما می شوند که میتونید کد زیر رو به فایل 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>

نمایش به صورت پاسخگو و ایجاد جدول های 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>

امیدوارم مفید بوده باشه

منبع : قالب وردپرس

پاسخ دهید

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