پنهان کردن یک عنصر (Element)، هنگامی که عرض صفحه از یک مقدار مشخص کوچکتر باشد، با قاعده @media ، در CSS
با استفاده از قاعده media@ در CSS ، می توانیم تعیین کنیم که در هنگام کوچکتر بودن عرض صفحه از یک مقدار مشخص، آنگاه یک عنصر (Element) خاص از صفحه، نمایش داده نشود (پنهان شود).
در واقع عنصر (Element) مورد نظر، تنها در صفحه نمایش های (Screen) با عرض بزرگتر از یک مقدار مشخص نمایش داده می شود.
اگر عنصر (Element) مورد نظر دارای id برابر kelidestan باشد و بخواهیم که وقتی عرض صفحه از 600 پیکسل (px) کوچکتر باشد، نمایش داده نشود، آنگاه کد CSS زیر را می نویسیم :
به مثال زیر توجه کنید :
یک تگ div با id برابر kelidestan در صفحه HTML تعریف می کنیم و تعیین می کنیم که اگر اندازه عرض صفحه از 600 پیکسل (px) کوچکتر بود، آنگاه آن تگ div پنهان شود.
کد HTML تعریف تگ div با id برابر kelidestan :
کد CSS :
در بخشی از کدهای بالا، اندازه تگ div را مشخص نموده ایم و همچنین یک رنگ (Color) خاص را برای پس زمینه (Background) آن مشخص نموده ایم تا کل مساحت تگ div را به راحتی تشخیص دهید.
کد کامل صفحه HTML :
نتیجه :
با کوچک و بزرگ کردن صفحه، سعی کنید که پیدا و پنهان شدن عنصر div را مشاهده نمایید :
