ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

طراحی یک صفحه واکنش گرا ساده با استفاده از تگ @media مطلب ویژه

توسط 29 خرداد, 1394 10014 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

روز قبل آموزشی با عنوان آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5 در سایت فعال شد که به طور کامل کاربرد تگ @media در آن مشخص شده است .به طور کلی ما با استفاده از Media Queries میتوانیم تعیین کنیم که صفحه قالبی که ایجاد کرده ایم در هر رزولوشن به چه شکلی نمایش داده شود . در این تمرین میخواهم به شما یاد بدهم که با استفاده از تگ @media به صفحه ایجاد شده دستور بدهید که اگر اندازه آن از 500 پیکسل کوچکتر شد رنگ پس زمینه صفحه تغییر کند .  مشاهده دمو در مرورگر

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .
با تگهای HTML آشنایی دارید ؟ اگر با Html کار نکرده اید بهتر است بر روی لینک مورد نظر کلیک کرده و کمی با تگها آشنا شوید.

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

2. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید .

<!DOCTYPE html>
<html>
    <head>
          <style>
          </style>
    </head>
<body>
</body>
</html>

3. کد کلی به شکل زیر باید درون فایل index.html تایپ شود . با استفاده از تگ مدیا مشخص میکنیم که اگر ابعاد صفحه از 500 پیکسل بیشتر شد رنگ آن تغییر کند. تگ media برای ریسپانسیو کردن یک قالب مورد استفاده قرار می گیرد . با استفاده از تگ media مقیاس فعلی دستگاه کاربر رو چک میکنیم , اگر کاربر از دستگا های با رزولوشن بالا استفاده کند یکسری کد اعمال می شود . به عنوان مثال شما 3 تا div کنار هم دارین که این 3 تا کنار هم تمام صفحه رو اشغال می کنند . حالا ما می خواهیم مثلا وقتی که رزولیشن کمتر از 500 پیکسل بود div ها برن زیر هم و هر div کل بلوکش رو بگیره !
نکته مهمی که وجود داره اینه که شما تو استایل اصلی باید  طول عنصر ( width ) رو حتما با % تنظیم کنید نه پیکسل . مثلا اگه 3 تا div تو یه ردیف تمام بلوک رو گرفتن به هر کدوم 30% عرض بدید نه 300px .

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
    background-color:lightgreen;
}

@media only screen and (max-width: 500px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is less than 500 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>

 

 

حالا فایل index.html را اجرا کنید . صفحه را کمی کوچک تر کنید تا رنگ آن تغییر کند.


مشاهده دمو در مرورگر

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:50
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا