در‌این گرد هم آیی از فراگیری CSS قصد داریم به مبحث اصلی طراحی سایت Media Query در CSS بپردازیم. این دعوا در ریسپانسیو کردن صفحه ها اینترنت بسیار کاربردی میباشد. در شرایطی که هنوز اطلاع متعددی از پباده سازی رسپانسیو یا این که واکنشگرا ندارید در‌این یک‌سری گردهمایی یاروهمدم ما باشید.
پباده سازی واکنشگرا چه چیزی است؟
پباده سازی Responsive یا این که واکنشگرا به پباده سازی گفته می گردد که در همه نمایشگرها به صدق قابل مشاهده باشد. ریسپانسیو بودن اینترنت‌وب سایت یکی استانداردهایی میباشد که می بایست هر پباده سازی به آن دقت داشته باشد چرا‌که این مورد در تجربه کاربری، بهینه سازی اینترنت‌تارنما و اکثری از حیطههای دیگر تاثیر گذار میباشد.
موضوعی که درین نوع پباده سازی می بایست گزینه اعتنا قرار بگیرد، آسودگی استفاده کننده در مشاهده تمامی‌ی محتوای حاضر در اینترنت‌وبسایت میباشد. اینکه با مشاهده اینترنت‌وب سایت در هر نمایشگر، کل قسمت‌ها به صدق در کنار هم قرار بگیرند، خوانا باشند، دکمه‌ها قابل کلیک باشند و هیچ بخشی از تارنما در نمایشگرهای کوچک یا این که پهناور به هم ریختگی نداشته باشد.
این اصل میتواند با جابه‌جا کردن موادسازنده در نمایشگرهای متفاوت، تغییر و تحول سایز و اندازه‌ها و… حادثه بیفتد. مواقعی که قصد داریم طی یک سری نشست به آن بپردازیم.
همت کردیم به معمولی‌ترین گویش این معنا را ذکر کنیم البته درصورتی که هنوز کلمه و واژه‌ی ریسپانسیو برای شما ابهام دارااست به نوشته‌علمی تحت رجوع کنید.
پباده سازی ریسپانسیو چه میباشد؟
معرفی Media Query در CSS
امر Media یک کدام از دستورها اساسی برای ریسپانسیو کردن صفحه ها اینترنت میباشد. به یاری این فرمان می‌اقتدار استایل‌های گوناگون را در نمایشگرهای متعدد اعمال کرد. مثلا شما میتوانید چند از CSSها را برای نمایشگر تلفن همراه بنویسید و چندین استایل را صرفا به نمایشگر کامپیوتر تخصیص دهید!
ساختار یک مدیا کوئری:
1
2
3
@media mediatype and (expressions) {
CSS Code;
}
مثال‌ای از یک مدیا کوئری:
1
2
3
4
5
@media screen and (max-width: 572px) {
body {
background: #000 ;
}
}
در کد بالا در حالتی که برگه نمایشگر از ۵۷۲ پیکسل کمتر باشد (برگه موبایل) رنگ پس‌مورد مشکی گردد. مثلا برای برهه زمانی‌هایی که میخواهید اینترنت‌تارنما در تلفن همراه دارک باشد البته در نمایشگرها خیر!
چندین نمونه از مدیا کوئری
۱- Media Query با پهنا نمایشگر
1
2
3
4
5
6
7
8
9
10
11
@media screen and (min-width: 600px) {
body {
font-size: 20px;
}
}
@media screen and (max-width: 600px) {
body {
font-size: 17px;
}
}
در نمونه بالا طرز به کارگیری به طور همزمان از یک‌سری مدیا‌کوئری را مشاهده می‌کنید. در‌این نمونه در نمایشگر های کوچک‌خیس از ۶۰۰ پیسکل، اندازه فونت ۱۷ پیکسل میباشد البته در نمایشگرهای بزرگتر از این سایز، فونت به ۲۰ پیسکل تغییر و تحول خواهد کرد.
۲- Media Query برای جهت نمایشگر
1
2
3
4
5
@media only screen and (orientation: landscape) {
body {
background-color: gray;
}
}
این کوئری برای جهت نمایشگر (گوشی و تبلت) میباشد و هنگامی به کارگیری میشود که مخاطب جهت موبایل یا این که تبلت خویش را به وضعیت افقی (landscape) تغییر و تحول دهد.
۳- استعمال همزمان از دو شرط
1
2
3
4
5
6
7
@media screen and (max-width: 900px) and (min-width: 500px) {
.box {
font-size: 50px;
padding: 50px;
}
}
در کد بالا مثال‌ای از به کار گیری به طور همزمان از دو شرط را مشاهده می کنید. کدهای نوشته شده در نمایشگرهایی با سایز ۵۰۰ تا ۹۰۰ پیکسل قابل روئیت می باشند.
- ۹۹/۰۸/۰۶