رسپانسیو در css حرفه ای

برای responsive کردن در scc یک فایل css دیگه زیر فایل css خودتون اضافه کنید

مثلا من اسمش را اینجا q قرار دادم

<link href="style.css" rel="stylesheet" type="text/css">

<link href="q.css" rel="stylesheet" type="text/css">

در فایل جدید بالا بنویسید

@media screen

میخواهیم از عرض 600 پیکسل به پایین تغییراتی اتفاق بیفتد مثلا بگراند تغییر رنگ دهد

@media screen and (max-width:600px)

{

body{background-color:#FF0004;}        

}

حال میخواهیم برای چند عرض بنویسیم

دقیقا به همین شکل است فقط دقت کنید از عرض زیاد به عرض کم باید بنویسید

به مثال زیر توجه کنید که اول عرض 1000 پیکسل و بعد عرض کم تر 500 پیکسل را پوشش میدهد

@media screen and (max-width:1000px)

{

body{background-color:#FF00f4;}




ul {

margin:0 30%;        

}




ul li ul{

margin:0 ;

 width: 80px;        

}




}

@media screen and (max-width:500px)

{

body{background-color:#FF0004;}




ul {

margin:0 30%;        

}




ul li ul{

margin:0 ;

 width: 80px;        

}




}

lk برای این عرض ها پیشنهاد میکنم css بزنیم

1200

992

768

480

320

سعی کردم مختصر و مفید باشه

اینم سایت خوب برای چک کردن رسپانسیو بودن سایتتون

https://www.responsinator.com/