این آموزش در تاریخ ۱۴۰۰/۱۰/۲۴ آپدیت شده است.
آموزش واکنش گرایی صفحات وب قدم سوم
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم سوم با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش واکنش گرایی صفحات وب قدم سوم
خب دوستان ما در این جلسه ( قدم سوم از آموزش واکنش گرایی ) میخوایم با دستور / یا قانون Media@ در CSS آشنا بشیم و بدونیم چیه و چجوری ازش استفاده کنیم.
من آموزش کامل و با جزئیات این دستور رو در بخش آموزش ویژگی های CSS ارسال کردم و لطف کنید با کلیک بروی لینک زیر آموزش این دستور رو بطور کامل مطالعه نمایید. ( یعنی اول آموزش دستور media@ رو اوکی باشید بعدش این جلسه رو دنبال کنید )
استفاده از دستور Media@ برای واکنش گرایی کاملا ضروری می باشد، برای مشاهده آموزش دستور Media@ در CSS کلیک کنید.
Free-Learn
مثال های مختلف از دستور Media@
خب من دیگه انتظار دارم که آموزش دستور Media@ رو بطور کامل از طریق لینک بالا مطالعه کرده باشید، و در ادامه فقط چندتا مثال خواهیم داشت که نحوه استفاده از این دستور رو نشون میده.
مثال شماره ۱ : وقتی اندازه عرض صفحه کمتر از ۵۰۰px شد ( یعنی میشه روی گوشی موبایل )، رنگ زمینه و رنگ متن صفحه تغییر پیدا میکنه ( حالا نه فقط رنگ زمینه و رنگ متن ، شما هرچیزی میتونی تعریف کنی )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> /* در حالت عادی */ body{ background-color:#fff; color:#000; text-align:center; } /* در حالت واکنش گرایی */ /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { body { background-color:black; color:yellow; } } </style> |
مثال شماره ۲ : در حالت عادی ( یعنی روی صفحه نمایش کامپیوتر و لپ تاپ ها ) ۲ تا ستون داریم ، میخوایم کاری کنیم که روی گوشی موبایل این ستون ها بیوفتن زیر هم ( خب همین یعنی واکنش گرایی )
|
1 2 3 4 5 6 7 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { .seton-rast,.seton-chap{ float:none; width:100%; } } |
مثال شماره ۳ : یک گالری تصویر ساده + واکنش گرایی ( تصاویر در حالت عادی بسمت چپ شناور میشن برای اینکه کنار همدیگه قرار بگیرند، ولی وقتی اندازه صفحه کمتر از ۵۰۰ پیکسل میشه همشون زیرهم قرار میگیرن )
|
1 2 3 4 5 6 7 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media screen and (max-width: 500px) { div.myimg { float: none; width: 100%; } } |
مثال شماره ۴ : مخفی کردن عناصر با استفاده از دستور Media@ ( در مثال زیر، تصویر در کامپیوتر یا لپ تاپ نمایش داده میشه ولی در گوشی های موبایل مخفی میشه و یک پیغام نمایش داده میشه و میگه که شما الان روی گوشی موبایل هستید )
|
1 2 3 4 5 6 7 8 9 |
/* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media screen and (max-width: 500px) { img.MyImage { display: none; } .MyMessage { display: block; } } |
مثال شماره ۵ : تغییر اندازه فونت با استفاده از دستور Media@ ( مثلا در صفحه نمایش های بزرگ مثه لپ تاپ اندازه فونت ۴۰ پیکسل هست ولی خب میخوایم در موبایل ۲۰ پیکسل باشه )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> /* روی صفحه نمایش های بزرگ */ .MyTitle { font-size: 40px; text-align: center; } /* روی گوشی های موبایل */ /* وقتی اندازه صفحه کمتر از 500 پیکسل شد */ @media only screen and (max-width: 500px) { .MyTitle { font-size: 20px; } } </style> |
مثال شماره ۶ : برای وقتی که صفحه در حالت افقی یا عمودی بود. ( وقتی اندازه ارتفاع صفحه نمایش بیشتر یا مساوی از اندازه عرضش باشه Portrait اتفاق میوفته و وقتی اندازه عرض بیشتر از اندازه ارتفاعش باشه Landscape اتفاق میوفته )
|
1 2 3 4 5 6 7 |
@media only screen and (orientation: portrait) { .... } @media only screen and (orientation: landscape) { .... } |
Free-Learn
نقطه ی شکست صفحه چیست؟
بطور کلی به اون اندازه یا نقطه ای از صفحه که قراره شکسته بشه و استایل جدید بگیره ، بهش میگیم نقطه شکست صفحه ، مثلا در مثال های بالا ۵۰۰px میشه نقطه شکست صفحه مون.
یعنی هرموقع اندازه عرض صفحه کمتر از ۵۰۰ پیکسل میشد، استایل جدید ( مثلا رنگ زمینه عوض میشد یا … ) روی صفحه اعمال میشد.
حال برای دستگاهای مختلف مثه گوشی موبایل ، تبلت ها یا لپ تاپ ها و هر دستگاه دیگه ای که قراره یک صفحه وب توش نمایش داده شه ، ما باید نقطه شکست ایجاد کنیم.
بفرض مثال ۵۰۰px خب برای موبایل ، برای تبلت باید چکار کرد؟ یا آیا مگه همه ی گوشی های موبایل ۵۰۰px براشون مناسبه؟ طبیعتا برخی از گوشی های موبایل اندازه صفحه نمایششون باهمدیگه فرق میکنه ، خب باید چکار کرد؟
محدودیتی در ایجاد نقطه شکست وجود نداره، یعنی شما هر اندازه که دوس داشتی نقطه شکست بزنید ( هیچ محدودیتی وجود نداره )، بفرض مثال من چندین نقطه شکست به دلخواه خودم درست کردم :
|
1 2 3 4 |
@media only screen and (max-width: 500px) {} @media only screen and (min-width: 600px) {} @media only screen and (min-width: 700px) {} @media only screen and (min-width: 800px) {} |
طبق دستورات بالا ، هر ۱۰۰ پیکسل یه نقطه شکست هست ولی خب اینجوری عشقی نقطه شکست درست کردن هم منطقا خوب نیست چون خیلی خیلی پیچیده میشه کارتون و حتی استایل کلی سایت ممکنه بکلی خراب بشه.
یعنی اینجوری شما باید در نقطه شکست ۵۰۰ خب استایل بنویسید دوباره در ۶۰۰ بازم استایل و… خب اینجوری هم منطقی نیست هم الکی کارتون رو پیچیده میکنید.
اگه مثلا به شما گفتن برای فلان صفحه نمایش با فلان اندازه خاص ( یعنی مثلا این صفحه نمایش یه صفحه نمایش خاصی هست و اندازش در دسته اندازه های استاندارد نیست ) خب بازم مهم نیست و کافیه به دلخواه خودتون نقطه شکست مناسب با همون صفحه نمایش درست کنید.
Free-Learn
نقاط شکست استاندارد
برای اینکه عشقی همینجوری الکی نقطه شکست درست نکنیم ، اومدن بررسی کردن و دیدن که یسری اندازه ها در اکثر دستگاه ها ( مثلا گوشی های موبایل ، تبلت ها و.. ) یکسان می باشند و دیگه گفتن آقا مثلا کمتر از ۵۰۰px برای گوشی های موبایل یا مثلا کمتر از ۷۶۸px برای تبلت ها و…
پس شماهم میتونید از نقاط شکست زیر برای دستگاهای مختلف که استاندارد هم باشه استفاده نمایید :
|
1 2 3 4 5 6 7 8 9 10 11 |
/* برای گوشی های موبایل */ @media only screen and (max-width: 480px) {...} /* برای تبلت ها در حالت عمودی و گوشی های موبایل کمی بزرگتر */ @media only screen and (min-width: 481px) {...} /* برای لپ تاپ ها و تبلت ها بصورت افقی */ @media only screen and (min-width: 769px) {...} /* برای صفحه نمایش های بزرگ مثه کامپیوتر و بالاتر */ @media only screen and (min-width: 1280px) {...} |
Free-Learn
سعی کنید همیشه اول برای موبایل استایل بنویسید
توصیه میشه و بهینه تر است که اول برای گوشی های موبایل استایل بنویسید ، بعدش برای صفحه نمایش های بزرگتر مثه لپ تاپ و کامپیوتر ، هدف اصلی از اینکار فقط و فقط بالابردن سرعت بارگذاری سایت در گوشی های موبایل هست. ( چون الان دیگه بیشتر مردم از موبایل استفاده میکنن )
یعنی بطور کلی اگه میخواید سرعت بارگذاری صفحات وبتون در گوشی های موبایل بالا بره باید اول برای موبایل استایل بنویسید، یعنی مثلا بجای اینکه بگیم وقتی اندازه صفحه کمتر از ۵۰۰px شد، میگیم وقتی اندازه صفحه بیشتر از ۵۰۰px بود دستورات و استایل مخصوص حالا لپ تاپ یا کامپیوتر اعمال بشه. ( لطفا به مثال زیر توجه نمایید )
با توجه با بالابودن و رفتن تعداد کاربرانی که از گوشی های موبایل استفاده میکنند، میگن اول باید برای صفحه نمایش های کوچکتر مثه موبایل استایل بنویسید، و بعد برای صفحه نمایش های بزرگتر مثه کامپیوتر ،هدف اصلی از اینکار بهبود تجربه کاربری و بالابردن سرعت بارگذاری صفحه در گوشی های موبایل می باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* وقتی اندازه صفحه بیشتر از 500 پیکسل شد */ @media only screen and (min-width:500px) { .seton-rast { float: right; width: 50%; } .seton-chap { float: left; width: 50%; } } |
Free-Learn
نکات و توضیحات
- سعی کنید از واحدهای اندازه گیری واکنش گرا مثه درصد ( % ) یا vh و vw یا em و rem استفاده نمایید چون این اندازه ها بخودی خود واکنش گرا هستند و تاجایی که میشه از اندازه های ثابت استفاده نکنید.
- min-width یعنی وقتی بزرگتر بود و max-width یعنی وقتی کوچکتر بود، یعنی اگه از max-width با مقدار مثلا ۵۰۰px استفاده کنیم یعنی داریم میگیم وقتی اندازه صفحه کمتر از ۵۰۰px شد و اگه از min-width با مقدار مثلا ۷۰۰px استفاده کنیم یعنی داریم میگیم وقتی اندازه صفحه بیشتر از ۷۰۰px شد.
