درست کار نکردن حالت ریسپانسیو در عرض 600px تا 768px

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

با سلام من تمام کدها رو طبق گفته استاد زدم.

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

اما اگر فقط کلاس col-xs داده باشیم و کلاس col-s نداده باشیم در سایز کمتر از 768px تا بزرگتر از 600px این اتفاق نمیوفتد.

دلیلش هم به نظر من منطقی هست چون کلاس col-xs در مدیا کوئری کوچکتر از 600 اعمال شده و برای بزرگتر از 600px این کلاس مقدار دهی نشده و نباید اتفاق خاصی بیوفتد.

من پیوست جلسه آخر این مبحث رو دانلود کردم (کد استاد)، فایل استاد هم اجرا میکنم همین خطا را دارد.

سوال من اینه چرا کد استاد توی ویدیو کار میکنه؟ چطور ممکنه؟

تصویر:

62f3-Screenshot (2).png 2834-Screenshot (3).png b816-Screenshot (4).png c86f-Screenshot (5).png

https://freeimage.host/i/H3RFVqJ
https://freeimage.host/i/H3RFGsa
https://freeimage.host/i/H3RFEWg
https://freeimage.host/i/H3RF1zF

درود

اول بابت تاخیر در پاسخگویی پوزش میخوام :)

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

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

برای اینکه برای شما هم مشکل حل بشه کافیه که اول میزان زوم مرورگر رو 100 درصد بگذارید (با کنترل + و کنترل - تنظیم میشه) بعد میزان پدینگ میان هر ستون و یا میزان درصد col رو در سایز مربوطه بازنویسی کنید (مثلا col-l-1 بشه 10 درصد و...) به اون کلاس container هم دقت کنید اونجا گفتیم که پهنای کل ردیف چند پیکسل باشه. اونم باید براساس سایز مانیتور بازنویسی بشه.

نازنین کریمی مقدم ۰۵ آذر ۱۴۰۱، ۱۹:۱۵

نه اصلا مربوط به سایز صفحه نیست

اگر از دقیقه 35 تا 38 ویدیو رو ببینید استاد از کلاس col-xs-12 و col-md-6 استفاده کردند.

زمان تغییر سایز صفحه برای بررسی رسپانسیو بودن از سایز 600 تا 768 پیکسل باز هم صفحه از کلاس col-xs-12 پیروی میکنه ولی برای ما ( و پروژه نهایی استاد) چنین اتفاقی نمیوفته و در سایز 600 تا 768 پیکسل هیچ کلاسی اعمال نمیشه.

علت این موضوع رو میخوام بدونم.

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

Milad Mokhtari ۰۵ آذر ۱۴۰۱، ۲۲:۱۶

دلیل تفاوتشون این هست که اولش استاد موقع آموزش کلا کلاس col-s رو در استایل هم تعریف نکرده بودند. شما در این فایل نهایی کلا این مدیا کوئری رو از استایل حذف کنید و تست کنید (مشابه ویدیو در بخش html هم چیزی تخصیص ندید) میبینید که مثل ویدیو نشون داده میشه.

اما جدای این حرفها در کل چیزی که برای طراحی ریسپانسیو مهمه اینه که همونطور که در کامنت اول تون فرمودید بهتره col-s رو تعریف کنید و در html به المان تخصیص بدید. پس سعی کنید که همیشه به این صورت بنویسید تا درست اعمال بشه. خلاصه اینکه کار رو به اما و اگر و تبعیت از سایز قبلی نسپرید.

<div class="col-xs-12 col-s-1 col-md-1"><div class="gray-Color">1div>div>

نازنین کریمی مقدم ۰۶ آذر ۱۴۰۱، ۰۸:۱۵