عدم هماهنگی اندازه ها در ریسپانسیو

[فرهاد-سئو 905]

سلام

من تازه دارم مقالات واکنش گرا کردن سایت ( ریسپانسیو ) رو میخونم و همزمان هم یک قالب رو واکنشگرا میکنم

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

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

اندازه هایی که من نوشتم برای قالب :

@media (min-width: 1920px) {
@media (min-width: 1280px) {
@media (min-width: 980px) and (max-width: 1279px) {
@media (min-width: 800px) and (max-width: 979px) {
@media (min-width: 768px) and (max-width: 799px) {
@media (min-width: 600px) and (max-width: 767px) {
@media (min-width: 360px) and (max-width: 767px) {

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

اما وقتی کمی صفحه رو بزرگ یا کوچیک میکنم کلا میریزه به

تمام اندازه ها هم با % و em وارد شده به غیر از ارتفاع که px وارد کردم ولی با این حال عناصر از موقعیت خودشون خارج میشن

[Alireza Xn 1644]

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

مثلا باید 4 باکس مجزا برای هر یک از اجزای قالب درست کنید مثلا فوتر , هدر , ساید بار , محتوا (footer,sidebar,header,content)

و برای هر یک از این اجزا یک اندازه خاص با % وارد کنید که مثل پازل کنار هم دیگه جا بگیرن .

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

توی فایل استایل اندازه کل قالب رو برابر با 1200 پیکسل قرار بدید و حالا باید تایین کنید که توی اندازه 1200 پیکسل به پایین اندازه کلاس main به % بجای پیکسل تغییر کنه .

مثلا 90% !توی این حالت واکنش گرایی قالب فعال میشه و مزیتی که داره اینکه توی رزولوشن های بالاتر قالب تغییری نمیکنه و ثابت خواهد بود .

مثال :

   <div class="main">

    <header>

	 Header content

    </header>


    <aside>


	 Sidebar content

    </aside>



    <article>

	    Home Content

    </article>



    <footer>

	    Footer Content

    </footer>

    </div>

[فرهاد-سئو 905]

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

مثلا وقتی فرد با تلویزیون میخواد وارد سایت بشه چطوری متن مطالب رو بخونه

به همین خاطر از ابتدا مقدا body رو روی 100% پهنا قرار دادم

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

#box {
margin: 2% 23% 0 0;
padding: 2%;
}

در مدیا کوئری که مثلا 768 هست کاملا درست هست ولی وقتی صفحه رو بزرگ تر یا کوچیکتر میکنم مثلا 803 پیکسل میکنم مقدار فاصله ای از حاشیه ها داشت میریزه به هم

مشکلم اینجاست

[فرهاد-سئو 905]

؟

[SM-Mahdavi 5427]

شما هر جا می بینی طرحت داره به هم میریزه یه media query دیگه تعریف کن. ولی در کل با % وقتی همه چیز رو بزنید مشکلی نخواهد بود.

[Alireza Xn 1644]

حالا واقعا به نظرتون کسی با تلویزیون میاد توی سایت ؟؟؟ !!! :mellow:

توی طراحی اول باید نیاز معلوم بشه بعد به مرحله نهایی برسه ! شما ببینید سایتی که میخواهید طراحی کنید واسط کاربریش در چه حدیه بازدید چقدر داره از چه Device هایی بیشتر کاربر داره از چه رزولوشن هایی بعد نتیجه نهایی رو با هم دیگه ترکیب کنید و بعد از اون پروژه رو نهایی کنید .