یک صفحه HTML/CSS ساده بسازید که شامل دو ستون محتوا باشد و با استفاده از media queries در عرض صفحهٔ کمتر از 600px هر دو ستون به یک ستون ست شوند.
6.0 بازدید آخرین ویرایش در 221 روز قبل ساعت 01:07 0.0
در فایل CSS از یک کانتینر با display:flex یا grid برای چیدمان دو ستون استفاده کنید و عرض ستونها را به صورت درصدی تعیین کنید (مثلاً 50%). سپس یک قاعدهٔ @media (max-width: 600px) اضافه کنید که جهت فلکس را ستون کرده یا عرض هر ستون را 100% قرار دهد تا به صورت یک ستونی نمایش داده شود. نکات: از واحدهای نسبی (٪، rem) استفاده کنید، نقطهٔ شکست 600px را در DevTools مرورگر تست کنید و مطمئن شوید در HTML متا تگ viewport موجود است تا نمایش در موبایل صحیح باشد.
توسط پژوهشگر در 221 روز قبل ساعت 01:07 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
این روش با استفاده از کانتینر فلکس یا گرید برای دو ستون و پاسخ به اندازه صفحه با media query کارآمد است. با تعیین عرض ستونها به صورت درصدی مثل 50%، طرح در اندازههای مختلف پایدار میماند. اضافه کردن meta viewport و آزمایش breakpoint با DevTools در عرض 600px ضروری است تا ستونها به 100% گسترش یابند و به یک ستون تبدیل شوند. برای بهبود، استفاده از gap و box-sizing: border-box را در نظر بگیرید تا فاصلهها و اندازهها دقیق باقی بماند.
گزارش