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

[hassan_shahi]

سلام خسته نباشید

من میخوام یک قالبی رو ریسپانسیو کنم اما میخوام همون کدایی که تو فایل style.css هستش همونارو ویرایش کنم که تمامی قسمت ها با کوچیک شدن صفحه کوچیک بشن.

حالا من برای شروع قسمت هدر سایت رو خواستم ریسپانسیو کنم که یه عکس 428*40 هستش من میام به اون عکس تو style.css قسمت width:100% میدم این تصویر با بزرگ کوچیک شدن صفحه بزرگ و کوچیک میشه اما یه مشکلی که به وجود میاد اینه که زمانی که width:100% بهش میدم کل هدر رو میگیره من باید چیکار کنم که سایز عکس همون 428*40 باشه ولی زمانی که صفحه کوچیک میشه اونم کوچیک بشه؟؟؟؟

روی این سایت دارم ریسپانسیو رو انجام میدم http://axer.ir

[sazsaz]

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

@media screen and (max-width: 500px)

برای هر اندازه کد را قرار دهید و اندازه مخصوص را
البته در در هدر سایت هم از کد زیر استفاده کنید

<meta content="width=device-width, initial-scale=1" name="viewport">

[hassan_shahi]

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


برای هر اندازه کد را قرار دهید و اندازه مخصوص را
البته در در هدر سایت هم از کد زیر استفاده کنید

الان من باید به قسمت div این @media screen and (max-width: 500px) رواضافه کنم؟نیازی نیست قسمتای height و width رو به %100 تغییر بدم؟؟؟

و قسمت کد <meta content="width=device-width, initial-scale=1" name="viewport"> که گفتید تو هدر وارد کنم برای چی هستش؟؟؟

[*Mr.Mehdi*]

الان من باید به قسمت div این @media screen and (max-width: 500px) رواضافه کنم؟نیازی نیست قسمتای height و width رو به %100 تغییر بدم؟؟؟

و قسمت کد <meta content="width=device-width, initial-scale=1" name="viewport"> که گفتید تو هدر وارد کنم برای چی هستش؟؟؟

درود

@media screen and (max-width: 500px)

رو باید به css اضافه کنید،معنیش اینه که وقتی بیشترین عرض صفحه 500px بود دستورات زیرش رو انجام بده:

مثلا رنگ فلان کلاس رو قرمز کن که به صورت زیر میشه:

@media screen and (max-width: 500px) {.class { color:red; }}

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

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

[sazsaz]

توی هر اندازه باید شما طول همان اندازه را به بادی دهید و برای طول و عرض تصاویر هم از max-width و max-height استفاده کنید مثلا:
کد:

max-width: 100%;
یا مثلا

کد:

max-width: 500px;