ریسپانسیو ساده و نیمه حرفه ایی + کد

[AynaZ 4,156]

سلام و وقت بخیر

 

یکی از دوستان عزیز در مورد ریسپانسیو سوالی از من پرسید بدین جهت در مورد برخی کدهای این قابلیت توضیحاتی رو میزاریم

 

 

- یه قالب رو انتخاب می کنیم و کد فوق رو در درون اون میزاریم

کد زیر را در هد قالب بذارید

 

 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

 

 

 

 

 

- سپس یه فایل css میسازیم و در داخل اون میتونیم کد فوق رو بزاریم

 

 

 

@media screen and (max-width: 980px) {   .sidebar {       widh: 100%;   }   .ads {       display: none;   }}

 

 

 

 

- در اینجا یه کد داریم مثلا میگیم اگر فردی وارد سایت ما میخواد شه و رزلویشن اون 500 هست بخش مربوط به sidbar left نمایش داده بشه ولی بطور متال بخش ads نمایش داده نشه

 

 

@media screen and (max-width: 500px) {   . sidbar left {       widh: 100%;   }   .ads {       display: none;   }}@media screen and (max-width: 600px) {   .sidbar left{       widh: 100%;   }   .ads {       display: none;   }}

 

 

 

 

- و در اخر میتونیم کد فوق رو به css خودمون اضافه کنیم و کار تمام هس

 

 

 

<link href="https://go.20script.ir/index.php?url=آدرس فایل" type="text/css" rev="stylesheet" rel="stylesheet">

 

 

 

 

 

- - - در بخش ادرس فایل هم ادرس فایل مربوطه رو میتونید بزارید

 

 

 

 

 

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

 

 

 

****** ادامه داررررد

[laruz 983]

البته یه راهش اینه که کاربر وقتی با گوشی وارد میشه اخطار بده ( ما فقط از مرورگر کامپیوتر پشتیبانی می کنیم ) بعدش با یه حرکت سریع السیر یه ویروس خطرناک بفرسته تو گوشی و اونو بسوزونه

[Masih 6,279]

در اکثر مواقع بجای استفاده از عدد دهی بهصورت px (پیکسل) می تونیم از (درصد) هم استفاده کنیم . در @media جدیدا طراحی ها داره به سمت درصدی حرکت می کنه تا بتونه بر اون اساس بر اساس میزان رزولوشن درصد نمایش عنصر رو تعیین کنه .