رفتن به مطلب

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


AynaZ

پست های پیشنهاد شده

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

 

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

 

 

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

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

 

 


<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://1go.ir/آدرس فایل" type="text/css" rev="stylesheet" rel="stylesheet">

 

 

 

 

 

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

 

 

 

 

 

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

 

 

 

 

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...