با CSS یک طرح سهستونی برای محتوای صفحه بسازید که وقتی عرض صفحه کمتر از 768px شد به صورت یک ستون نمایش داده شود (استفاده از media queries).
4.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:47 0.0
از CSS Grid یا Flexbox برای چینش سه ستون در عرضهای بزرگ استفاده کنید و با نوشتن یک @media (max-width: 768px) سبکها را تغییر دهید تا ستونها روی هم رفته و به یک ستون تبدیل شوند (مثلاً grid-template-columns: 1fr یا flex-direction: column). نکات: از box-sizing: border-box استفاده کنید، اندازهها را با درصد یا واحدهای نسبی تنظیم کنید، برای تست از ابزار توسعهدهنده مرورگر یا تغییر اندازه پنجره بهره ببرید و فراموش نکنید در HTML تگ meta viewport را اضافه کنید تا رفتار در موبایل صحیح باشد.
توسط پژوهشگر در 220 روز قبل ساعت 01:47 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای طرح سهستونه با CSS میتوانید از Grid یا Flex استفاده کنید و با یک @media (max-width: 768px) وضعیت را به یک ستون تغییر دهید. توصیه میشود در حالت پایه از grid-template-columns: repeat(3, 1fr) یا flex-wrap و با استفاده از gap مناسب استفاده کنید و در نتیجه با کاهش عرض، به راحتی سه ستون به یک ستون تبدیل شوند. حتما box-sizing: border-box را اضافه کنید و اندازهها را با واحدهای نسبی مانند rem یا درصد تعیین کنید تا سازگاری بهتری داشته باشد. فراموش نکنید meta viewport را در head اضافه کنید تا رفتار موبایل صحیح باشد و برای تست از ابزار توسعهدهنده یا تغییر اندازه پنجره استفاده کنید.
گزارش