رفتن به مطلب

مشکل در طراحی قالب ریسپانسیو


پست های پیشنهاد شده

سلامب

نده یه قالب طراحی کردم. حالا میخوام ریسپانسیوش هم بکنم ولی یه مشکلی هست.

مثلا من این کد رو قرار میدم تا استایل مخصوص رزولیشن 360 این باشه:


@media only screen and (max-width:360px){
.wrapper{
width: 326px;
direction:rtl;
margin: 0 5px;
}

ولی باز مرورگر استایل اولیه رو در نظر میگیره. یعنی همون استایلی که موقع طراحی بهش داده بودم رو.

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

همراه پست یه عکس هم ضمیمه کردم.

دوستان اگر کسی بلده راهنمایی کنه.

ممنون

post-3674-0-10779500-1411044576_thumb.pn

لینک به ارسال

1 . بهتره از این مدیا کوئری استفاده کنید :


@media (min-width: 360px) and (max-width: 480px) {

}

یا :


@media (max-width: 360px) {

}

2. در ریسپانسیو از % استفاده میشه نه px

3. کدهای ریسپانسیو باید زیر کدهای اصلی استایل قرار بگیره

یعنی اگه همه کدهاتون داخل یک فایل هست باید کدهای ریسپانسیو رو آخر از همه قرار بدین

اگر هم در فایل جداگانه گذاشتین باید بعد از فایل اصلی استایل قالب فراخوانی کنید

4. زمانی که میخواین اولویت بدین میتونین در انتهای کد از !important اسفاده کینن


.test { width:100px !important;}

لینک به ارسال

1 . بهتره از این مدیا کوئری استفاده کنید :


@media (min-width: 360px) and (max-width: 480px) {

}

یا :


@media (max-width: 360px) {

}

2. در ریسپانسیو از % استفاده میشه نه px

3. کدهای ریسپانسیو باید زیر کدهای اصلی استایل قرار بگیره

یعنی اگه همه کدهاتون داخل یک فایل هست باید کدهای ریسپانسیو رو آخر از همه قرار بدین

اگر هم در فایل جداگانه گذاشتین باید بعد از فایل اصلی استایل قالب فراخوانی کنید

4. زمانی که میخواین اولویت بدین میتونین در انتهای کد از !important اسفاده کینن


.test { width:100px !important;}

lممنون فرهاد جان گذینه 3 کارم راه انداخت.

لینک به ارسال

ببخشید چطور میشه استایل هایی که توی فایل اصلی قرار دادم توی حالت دومی (همون فایل ریسپانسیو) اعمال نشه؟ مثلا نمیخوام هیچکدوم از :hover ها اعمال بشه!؟؟

کافیه در مدیای که نمی خواید هاور عمل کنه استایلهای هاور رو دقیقا مثل استایلهای حالت غیر هاور قرار بدید .

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...