رفتن به مطلب

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


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

سلام

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

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

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

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

لینک به ارسال

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

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

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

لینک به ارسال

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

https://api.jquerymobile.com/jQuery.mobile.changePage/

لینک به ارسال

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

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

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

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

لینک به ارسال

برای این کار بایستی از تکنیک مدیا کوئیری 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

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

لینک به ارسال

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

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

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


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

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

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

لینک به ارسال

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

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


@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 به شکلی به همراه پهنای صفحه تغییر می کند که اصلا جلب توجه نکند و این به نظر کمی خوش آیند تر می آید!

لینک به ارسال

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

لینک به ارسال

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

این فایل دومه 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
لینک به ارسال

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

موفق باشید

لینک به ارسال

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید

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

لینک به ارسال

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

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

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

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

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

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

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

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

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

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

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

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

لینک به ارسال

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

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

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

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

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

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

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

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

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