Mohammad B2F

مشکل ریسپانسیو

16 پست در این موضوع قرار دارد

سلام

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

فقط یه صفحه معمولی باز بشه و بگه اپ سایت رو دانلود کنید. (البته وقتی با گوشی و طبلت وارد میشن)

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

چیکار کنم اینجوری بشه سایت ؟

0

به اشتراک گذاری این پست


لینک به پست

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

یه طول عرض واسه سایتت مشخص می کنی و میگی وقتی عرض کمتر از فلان عدد شد دیو کلاس ها و یا ای کلاس هایی که می خوای مخفی بشن رو display:none قرار بره.

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

1

به اشتراک گذاری این پست


لینک به پست

آدرس سایتتون رو بگید

1

به اشتراک گذاری این پست


لینک به پست

آدرس سایتتون رو بگید

www.bia2filtershekan61.com

0

به اشتراک گذاری این پست


لینک به پست

اگر منظورتون درست فهمیده باشم

https://api.jquerymo...ile.changePage/

ببخشید با این لینک چیکار کنم ؟

زبانم اوکی نیست:D

0

به اشتراک گذاری این پست


لینک به پست

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

یه طول عرض واسه سایتت مشخص می کنی و میگی وقتی عرض کمتر از فلان عدد شد دیو کلاس ها و یا ای کلاس هایی که می خوای مخفی بشن رو display:none قرار بره.

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

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

فقط چندتا مشکل کوچیک دارم. ممنون میشم راهنمایی کنید.

چه کدی رو در دستور css ها وارد کنم که به صورت متقیر و به صورت اتوماتیک وقتی صفحه کوچیکتر از حد تعین شده شد اونم هم اتوماتیک تغییر کنه ؟

عکس رو ببنید لطفا....

تو عکس اول سایت رو میبینید در حالت عادی (سیستم) که مشکلی وجود نداره

http://s6.picofile.com/file/8191695550/aadi.png

در عکس دوم سایت رو میبینید در حالت کوچکتر از 980

http://s6.picofile.com/file/8191695600/980.png

اما وقتی سایز رو بین 979 و 768 قرار میدم به صورت اتوماتیک تغییر سایز نمیده و سایت بهم ریخته باز میشه...

http://s3.picofile.com/file/8191695650/moshkel.png

باید چه کدی رو اضافه کنم که وقتی صفحه کوچیک و بزرگ میشود تغییر سایز به صورت اتوماتیک انجام بشه ؟

0

به اشتراک گذاری این پست


لینک به پست

چرا کسی جواب نمیده ؟

0

به اشتراک گذاری این پست


لینک به پست

چرا کسی جواب نمیده ؟

کمی صبور باشید پاسخ هم میگیرید

شما باید به این روش عمل کنید :


@media only screen and (min-width: 1024px) {
کدهایی که در این سایز مورد نیازتون هست
}

در این سایز میگیم که کمترین مقدار 1024 باشه این کدها اعمال بشه

و همینطور الی آخر ...

0

به اشتراک گذاری این پست


لینک به پست

کمی صبور باشید پاسخ هم میگیرید

شما باید به این روش عمل کنید :


@media only screen and (min-width: 1024px) {
کدهایی که در این سایز مورد نیازتون هست
}

در این سایز میگیم که کمترین مقدار 1024 باشه این کدها اعمال بشه

و همینطور الی آخر ...

این عکس رو ببینید...

بنظرم سایت ریسپانسیو میشه که به نرمی تغییر سایز بده ...

جوری که شما فرمودید یادم دارم تغییر سایز بدم...

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

متوجه منظورم شدید ؟

%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Adaptive.gif

Adaptive نسبت به پهنای صفحه به صورت یکباره خود را تغییر می دهد اما Responsive به شکلی به همراه پهنای صفحه تغییر می کند که اصلا جلب توجه نکند و این به نظر کمی خوش آیند تر می آید!

0

به اشتراک گذاری این پست


لینک به پست

برای ریسپانسیو باید یا از کتابخونه ها استفاده کنید و یا از ابعاد درصدی

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

من از ابعاد درصد استفاده کردم...

این فایل دومه css هم هستش ... استایل ریسپانسیو.

البته فقط برای 980 تا 767 هستش....


@media (max-width: 980px) {

.free-box {
float:none;
width:95%;
height:auto;
}
.free-box-inner {
float:none;
width:auto;
height:auto;
}
.free-box-inner h2 {
float:none;
width:95%;
height:auto;
}
.free-box-inner:hover h2 {
float:none;
width:95%;
height:auto;
}
.vip-box {
float:none;
width:95%;
height:auto;
margin-top: 0px;
}
.vip-box-inner {
float:none;
width:auto;
height:auto;
}
.vip-box-inner h2 {
float:none;
width:95%;
height:auto;
}
.vip-box-inner:hover h2 {
float:none;
width:95%;
height:auto;
}
.box {
float:none;
width:100%;
height:auto;
}
.fb {
float: left;
width:100%;
margin-left:25px;
}
.fb-in {
float: left;
width:100%;
}
.fb-title {
float: right;
}
.fb-icon {
float: left;
}
.note-acc {
}
.dl {
float: left;
width: 100%;
margin-left:25px;
}
.last-post {
float:right;
width:68%;
height:280px;
margin-right:25px;
}
.lpt {
float: right;
width:68%;
margin-right:25px;
}
.menu {
display:none;
}
.adress-finder {
display:none;

}
.android-ver {
display:none;
float:left;
width:100%;
margin-left:25px;
}
.weekly-com {
display:none;
float:right;
width:50%;
}
.reveal-modal-bg {
display:none;
}
.reveal-modal {
display:none;
}
.moarefi {
display:none;
float: left;
width:50%;
}
.tamasbama {
display:none;
float: left;
width:50%;
}
.login {
display:none;
float: left;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.login-fild2 {
display:none;
float: right;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.login-btn2 {
display:none;
float: right;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.login-btn2:hover {
display:none;
float: right;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.userlogin {
display:none;
float: right;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.form-a {
display:none;
float: right;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.txt-right {
display:none;
float: right;
width:100%
height:auto;
margin-left:5px;
margin-right:5px;
}
.hm {
display:none;
float: left;
width: 100%;
margin-left:5px;
}
.about {
display:none;
float: left;
width:100%;
height:auto;
margin-left:5px;
margin-right:5px;
}
.cr {
display:none;
float:none;
width:100%;
}
.wg {
float: right;
margin-right:35px;
padding:0;
}
}

ویرایش شده در توسط Mohammad B2F
0

به اشتراک گذاری این پست


لینک به پست

نتیجه اینکار راضی کننده بود برایتون یا خیر؟

1

به اشتراک گذاری این پست


لینک به پست

به نظرم قالبتون رو می تونید با یک فریم ورک رسپانسیو ساده مثل getskeleton.com از نو پیاده سازی کنید و نتیجه مناسب تری بگیرید

موفق باشید

0

به اشتراک گذاری این پست


لینک به پست

نتیجه اینکار راضی کننده بود برایتون یا خیر؟

مشکل از استایل اصلی سایت بود...

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

آره مشکل از درصد بود .... اما فایل ریسپاسیو مشکل نداشت. :D

بازهم ممنون از راهنماییتون.

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

میشه برای ریسپانسیو جوری برنامه داد که مکان اجزا جا به جا بشه ؟

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

مثلا الان روی سایت اصلی پیج فیسبوک جزو اجزای سوم هست.... اما ریسپاسیو که بشه میخوام بره آخر سایت.... اما نمیره.

باید چیکار کنم ؟

راهی داره ؟ یا باید کلا display کنم ؟

به نظرم قالبتون رو می تونید با یک فریم ورک رسپانسیو ساده مثل getskeleton.com از نو پیاده سازی کنید و نتیجه مناسب تری بگیرید

موفق باشید

دانلودش کردم ... اما نمیدونم باید چیکارش کنم !!

0

به اشتراک گذاری این پست


لینک به پست

مشکل از استایل اصلی سایت بود...

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

آره مشکل از درصد بود .... اما فایل ریسپاسیو مشکل نداشت. :D

بازهم ممنون از راهنماییتون.

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

میشه برای ریسپانسیو جوری برنامه داد که مکان اجزا جا به جا بشه ؟

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

مثلا الان روی سایت اصلی پیج فیسبوک جزو اجزای سوم هست.... اما ریسپاسیو که بشه میخوام بره آخر سایت.... اما نمیره.

باید چیکار کنم ؟

راهی داره ؟ یا باید کلا display کنم ؟

دانلودش کردم ... اما نمیدونم باید چیکارش کنم !!

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری