مشکل در سایز صفحه body برای ریسپانسیو کردن وب سایت

این تاپیک 7 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  sadaf ،‏ 7 ماه پیش .

این تاپیک تاکنون 272 بازدید داشته است .

نویسنده پست
سه شنبه ، 10 می 2016     9:50 ق.ظ #


sadaf

Subscriber
VIP
99 پست88 تاپیک

سلام
من میخوام سایتم رو ریسپانسیو کنم مثلا برای سایز 690 اینطوری میزنم

(media screen and (max-width: 690px@

0  تشکر
سه شنبه ، 10 می 2016     4:17 ب.ظ #


Reza Rajabpur

Subscriber
5 پست0 تاپیک

سلام به نظرم کدتون رو بنویسید تا بشه دقیقتر در موردش بحث کرد

0  تشکر
سه شنبه ، 10 می 2016     4:24 ب.ظ #


sadaf

Subscriber
VIP
99 پست88 تاپیک

کل پروژه رو بفرستم؟

0  تشکر
سه شنبه ، 10 می 2016     4:25 ب.ظ #


Reza Rajabpur

Subscriber
5 پست0 تاپیک

نه به نظرم همون بخش مربوط به responsive

0  تشکر
سه شنبه ، 10 می 2016     4:42 ب.ظ #


sadaf

Subscriber
VIP
99 پست88 تاپیک


@media screen and (max-width: 768px) {
.main, .top-menu ul, .tool-box, .menu-down ul, .slider-box, .vizhegi, .main, footer {
width: 100% !important;
}

aside {
width: 99% !important;
}

#nav-icon1, #nav-icon2 {
display: block;
}

.top-menu {
height: 46px;
}

.top-menu ul {
display: none;
background-color: #2E6095;
border-top: 1px solid #264A70;
margin: 0;
}

.top-menu ul li {
text-align: center;
float: none;
border-bottom: 1px solid #264A70;
border-top: 1px solid #5D80A5;
}

.tool-box .logo-box {
float: none !important;
}

.tool-box .search-box {
margin: 0 10px 10px 10px !important;
height: 50px !important;
}

.tool-box .basket {
margin: 10px 0 0 0 !important;
}

header .slider-box {
height: auto !important;
}

.slider-box .slider {
width: 100% !important;
}

.slider-box .right-content {
width: 90% !important;
margin: 0 auto !important;
float: none !important;

}

.left-content {
width: 100% !important;
float: none !important;
}

.slider-box .public {
margin: 5px auto !important;
}

/*----------------------------menu------------------------*/
.menu-down ul, .menu-down ul li {
width: 100% !important;
}

.menu-down {
height: auto !important;
}

.menu-down > ul {
display: none;
background-color: #F7F7F7;
border-top: 1px solid #D1D1D1;
z-index: 9999999 !important;
}
.menu-down .fa-sort-up{
display: none !important;
}
.dl-menu {
z-index: 9999999 !important;

}

.content-menu > ul {
display: none;
}

.content-menu:hover ul {
display: block;
}

.menu-down .dl-menu li {
margin: 0 !important;
float: none;
padding: 3px 0 2px;
border-left: 0;
text-align: center;
border-bottom: 1px solid #D1D1D1;
border-top: 1px solid #ffffff;
border-right: none;
}

.menu-down .inside-menu {
width: 100% !important;
height: auto;
margin-top: -7px !important;
background-color: #efefef;

}

.menu-down .inside-menu .content-menu {
width: 100% !important;
margin: 0 !important;
text-align: center;
padding: 5px 0;
border-bottom: 1px solid #D1D1D1;
border-top: 1px solid #ffffff;
}

.menu-down .inside-menu .content-menu ul {
background-color: #ebebeb;
}

.menu-down .inside-menu .content-menu span, .content-menu i {
float: none !important;
}

.menu-down .content-menu .fa-th-large {
display: none !important;
}

.inside-menu .content-menu .fa-chevron-right {
display: inline-block !important;
color: #003399;
}

/*////////////////main-------------------------------*/
.vizhegi {
height: auto !important;
}

.container {
width: 100% !important;
}

.container article {
width: 99% !important;
}

.news, .likes, .banner {
width: 60% !important;
margin: 5px auto;
}

header, footer, .top-menu {
min-width: initial;
}

/*-----------footer--------------*/
.content-footer, .bottom-footer {
width: 100% !important;
}

.bottom-footer span {
margin-left: 0 !important;
}

.menu-footer {
margin: 5px 10px 0 0 !important;
}

aside {
width: 100%;
}
}

برای تمام سایزها همینطوره از حدخودش خیلی کمتر استایل اعمال میشه

0  تشکر
سه شنبه ، 10 می 2016     5:06 ب.ظ #


Reza Rajabpur

Subscriber
5 پست0 تاپیک

سلام به نظرم مشکل از مرورگرها باشه

یعنی اینکه تمامی کدنویسی شما درسته چون اکثرا موارد کلیدی رو با درصد وارد کردید.

اما بعضی وقتا اندازه معیار برای مرورگرها متفاوته. مثلا من الان یک نمونه کد از پیش نوشته شده و رسپانسیو شده رو با دو مرورگر متفاوت (کروم و فایرفاکس) تست کردم که نتایج هر کدوم متفاوت بود. مثلا مرورگر کروم در یک اندازه شروع به واکنشگرایی میکرد و فایرفاکس در اندازه ای دیگر. (مثلا من خواستم اون گزینه منو  مخفی وقتی که صفحات کوچک میشوند رو تست کنم این اتفاق افتاد. مرورگر کروم در اندازه چند پیکسل بزرگتر شروع به واکنش کرد و گزینه منوی مخفی رو نشان داد، اما مروگر فایرفاکس در اندازه ای کوچکتر از خود واکنش نشان داد).

این رو هم امتحان بکنید. امیدوارم مشکل از اینجا باشه.

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

موفق باشید.

0  تشکر
سه شنبه ، 10 می 2016     5:09 ب.ظ #


Reza Rajabpur

Subscriber
5 پست0 تاپیک

شایدم اینکه دکمه زوم رو در عددی به غیر از 100 درصد قرار دادید. یعنی اندازه تصویر کمتر از 100 درصد باشه تو مرورگر. اینو هم تست کنید

1  تشکر
سه شنبه ، 10 می 2016     5:10 ب.ظ #


sadaf

Subscriber
VIP
99 پست88 تاپیک

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

زیاد نبود اما این خیلی عجیبه که توی خود مرورگر کروم یا حتی موزیلا

به طور جداگانه وقتی میزارم استایل 960 به پایین اعمال شه وقتی 940

رسید اعمال میشه و این خیلی مشکل بدیه چون ما از کجا بدونیم هرمرورگر

زیر چه سایزی اعمال میکنه؟

این قبلا درست بود نمیدونم چرا اینجور شد

مرورگر رو آپدیت میکنم ببینم مشکل حل میشه

0  تشکر
پست 1 تا 8 (از مجموع 8 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .