الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> :root { --font-x1: 20px; --font-x2: 24px; --font-x3: 28px; --font-x4: 32px; } h1 { font-size: var(--font-x4); } @media (max-width: 976px) { h1 { font-size: var(--font-x3); } } @media (max-width: 760px) { h1 { font-size: var(--font-x2); } } @media (max-width: 640px) { h1 { font-size: var(--font-x1); } } </style> </head> <body> <h1>CSS Using Variables in Media Queries</h1> <p>Resize the window to see how the header font-size will be changed.</p> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود