سوالاتی در مورد طراحی ریسپانسیو

[Mohsen.]

سلام دوستان
این سایت رو ببینید:

http://narenji.ir/
این سایت به صورت ریسپانسیو طراحی شده. اما وقتی inspect element میکنی میبینی که عرض ها و طول ها رو با px داده نه %. چطور ممکنه؟ مثلا با جی کوئریه؟:لبخندساده:

[Saber Mogaddas]

سلام
responsive web design یک نوع طراحی هست تا مشکل ما رو در رزولوشن های مختلف حل کنه . وب سایت مذکور بنظرم drupal هست ، ولی روش استفاده کرده برای responsive design به صورت زیر هست :


<style type="text/css" media="screen and (min-width: 761px)"> /*<![CDATA[*/ @import url("http://narenji.ir/sites/all/themes/narenji/css/narenji-not-mobile.css"); /*]]>*/ </style> <style type="text/css" media="screen and (max-width: 1242px) and (min-width: 1000px)"> /*<![CDATA[*/ @import url("http://narenji.ir/sites/all/themes/narenji/css/narenji-pc.css"); /*]]>*/ </style> <style type="text/css" media="screen and (max-width: 999px) and (min-width: 761px)"> /*<![CDATA[*/ @import url("http://narenji.ir/sites/all/themes/narenji/css/narenji-tablet.css"); /*]]>*/ </style> <style type="text/css" media="print, screen and (max-width: 760px)"> /*<![CDATA[*/ @import url("http://narenji.ir/sites/all/themes/narenji/css/narenji-mobile.css"); /*]]>*/ </style>

یعنی برای هر رزولوشن یک فایل css جداگانه نوشته شده و با تغییر عرض تصویر فایل css رو نیز تغییر میده.که به صورت % در فایل های دیگه عرض دهی شده .
شما متونید تو فایل css نیز این تنظیمات رو برای یک select انجام بدید به صورت زیر :

#nav
{
float: right;
}
#nav ul
{
list-style: none;
}
@media screen and (min-width: 400px) and (orientation: portrait)
{
#nav li
{
float: right;
margin: 0 0 0 .5em;
border:1px solid #000000;
}
}
@media screen and (min-width: 800px)
{
#nav
{
width: 200px;
}
#nav li
{
float: left;
margin: 0 0 0 .5em;
border: none;
}
}



روش های زیادی برای این نوع طراحی هست ، در نظر دارم تو روزهای آینده آموزشی با این عنوان برای دوستان قرار بدم تا آشنایی بیشتری به این روش داشته باشند.
موفق باشید..