آموزش مدیا کوئری در CSS3

مدیا کوئری در CSS3 به شما این امکان را می دهد که صفحه خود را به درستی در انداره های مختلف دیوایس ها به درستی و با استایل خاصی نمایش بدید.

سینتکس مدیا کوئری

@media [not | only] <media-type> [and] (<media-condition>);

1	@media [not \| only] <media-type> [and] (<media-condition>);

نوع مدیا

در CSS چهار گروه اصلی مدیا قابل تشخیص هستند. که شامل all، speech، print و screen می باشند. بقیه موارد منسوخ اند و اگر از آنها استفاده کنیم مرورگر آن نوع را نادیده می گیرد و استایل های نوشته شده را برای همه دستگاهها نمایش می دهد.

all : همه نوع دستگاه ها و مدیا
print : دستگاه پرینتر یا هر دستگاهی که می خواهد حالت پرینت را نمایش دهد مثل مرورگری که می تواند حالت پیش نمایشی از صفحه چاپ شده داشته باشد.
speech : صفحه خوان ها (screen readers) و هر دستگهایی که عملیات تبدیل متن به گفتار را انجام می دهد.
screen : همه دستگاهایی که در دسته speech یا print قرار نمی گیرند. (صفحه نمایش ها)

ویژگی های مدیا

ویژگی های مدیا خیلی جزیی تر از نوع مدیا عمل می کنند. در این مورد مدیا کوئری یک ویژگی خاص را در مورد مدیا مورد سوال قرار می دهد و اگر آن شرط بر قرار باشد استایل های نوشته شده اعمال می شوند.

سینتکس این مورد کاملا شبیه به ویژگی های سی اس اس می باشد بطوری که یک نام ویژگی وجود دارد یک علامت دونقطه و مقدار آن ویژگی جلوی آن قرار می گیرد.

به عنوان نمونه در زیر مدیا کوئری نوشته شده screen را به عنوان نوع مدیا در نظر می گیرد و ویژگی سوال شده min-width دستگاه می باشد که در این شرط باید ۷۶۸px باشد:

@media screen and (min-width: 768px) {
  /* استابل ها */
}

@media screen and (min-width: 768px) {

/* استابل ها */

}

پس در مثال بالا دنبال صفحه نمایشی با عرض کمتر از ۷۶۸px هستیم.

لیست ویژگی هایی که می توانند بصورت شرطی در مدیا کوئری قرار بگیرند به شرح زیر می باشند:

ابعاد صفحه نمایش/دستگاه
- width
- height
- aspect-ratio
- orientation
کیفیت صفحه نمایش
- resolution
- scan
- grid
- update
- overflow-block
- overflow-inline
رنگ
- color
- color-index
- monochrome
- color-gamut
موارد تعاملی
- pointer
- hover
- any-pointer and any-hover
اسکریپت نویسی
- scripting

مدیا کوئری ها و طراحی ریسپانسیو

مدیا کوئری ها به شما امکان سفارش سازی صفحات وب برای محدوده ای از دیوایس ها مثل تلفن های همراه, تبلت, دسکتاپ ها و غیره.. را بدون تغییر در HTML را می دهد.

یک مدیا کوئری در CSS3 شامل نوع مدیا و صفر یا بیشتر عبارات برای مطابقت با نوع و همچنین شرط خاصی از ویژگی های مدیا مثل عرض دیوایس یا رزولوشن صفحه است.

از آنجایی که مدیا کوئری یک دستور منطقی است, می تواند بصورت true یا false باشد.

نتیجه کوئری true خواهد بود اگر که نوع مدیا با نوع مشخص شده در مدیا کویری یکسان باشد و با نوع دیوایس مطابقت داشته باشد, پس تمام دستورات داخل بلاک آن اجرا می شود و استایل مربوطه روی دیوایس اعمال می شود

این یک مثال از مدیا کوئری در CSS3 برای دیوایس های استاندارد است :

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
    /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
    /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
    /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
    /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
    /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
    /* styles */
}

/* Smartphones (portrait and landscape) ---------- */

@media screen and (min-width: 320px) and (max-width: 480px){

/* styles */

}

/* Smartphones (portrait) ---------- */

@media screen and (max-width: 320px){

/* styles */

}

/* Smartphones (landscape) ---------- */

@media screen and (min-width: 321px){

/* styles */

}

/* Tablets, iPads (portrait and landscape) ---------- */

@media screen and (min-width: 768px) and (max-width: 1024px){

/* styles */

}

/* Tablets, iPads (portrait) ---------- */

@media screen and (min-width: 768px){

/* styles */

}

/* Tablets, iPads (landscape) ---------- */

@media screen and (min-width: 1024px){

/* styles */

}

/* Desktops and laptops ---------- */

@media screen and (min-width: 1224px){

/* styles */

}

/* Large screens ---------- */

@media screen and (min-width: 1824px){

/* styles */

}

نکته: مدیا کوئری در CSS3 یک راه بسیار عالی برای طراحی ریسپانسیو است. با استفاده از مدیا کوئری ها می تواند سفارش سازی های متفاوتی برای کاربران وب سایت خود که از تلفن های هوشمند یا تبلت ها اعمال کنید بدون آنکه در محتوای صفحه تغییری بوجود بیارید.

تغییر عرض ستون ها بر اساس اندازه صفحه

برای اینکه بتوانیم یک صفحه Responsive یا همان واکنشگرا داشته باشیم باید نقاط شکست یا همان Breakpoint ها را در طرح خود پیدا کنیم و با استفاده از آن نقاط می توانیم کوئری مناسب را بنویسیم.

بنابراین با استفاده از مدیا کوئری در CSS3 می توانید عرض صفحه وب و المان های مرتبط به آن را برای دادن بهترین تجربه نمایشی به کاربران در دیوایس های مختلف تغییر بدید.

استایل های زیر بطور خودکار عرض المان نگهدارنده را بر اساس صفحه یا سایز نمایشگر اعمال می شوند.

برای مثال, اگر اندازه نمایشگر کمتر از ۷۶۸ پیکسل باشد پس ۱۰۰٪ عرض نمایشگر را می گیرد, اگر بزرگتر از ۷۶۸px باشد ولی کمتر از ۱۰۲۴ باشد پس عرض آن ۷۵۰پیکسل می شود و به اینصورت ادامه دارد….

.container {
    margin: 0 auto;
    background: #f2f2f2;
    box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
    .container {
        width: 100%;
        padding: 0 10px;
    }
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .container {
        width: 750px;
        padding: 0 10px;
    }
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
    .container {
        width: 980px;
        padding: 0 15px;
    }
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
    .container {
        width: 1200px;
        padding: 0 20px;
    }
}

.container {

margin: 0 auto;

background: #f2f2f2;

box-sizing: border-box;

}

/* Mobile phones (portrait and landscape) ---------- */

@media screen and (max-width: 767px){

.container {

width: 100%;

padding: 0 10px;

}

/* Tablets and iPads (portrait and landscape) ---------- */

@media screen and (min-width: 768px) and (max-width: 1023px){

.container {

width: 750px;

padding: 0 10px;

}

/* Low resolution desktops and laptops ---------- */

@media screen and (min-width: 1024px) {

.container {

width: 980px;

padding: 0 15px;

}

/* High resolution desktops and laptops ---------- */

@media screen and (min-width: 1280px) {

.container {

width: 1200px;

padding: 0 20px;

}

نکته: شما می توانید از خصوصیت box-sizing بر روی المان ها برای ساخت لایه بندی های بصری و منعطف تر با زحمت کمتری بهره ببرید.

تغییر چیدمان صفحه براساس اندازه صفحه

شما می توانید از مدیا کوئری در CSS3 برای ایجاد چیدمان وبسایت های چندستونه که سازگاری و واکنشگرایی بیشتری با دیوایس ها دارند, استفاده کنید.

استایل های زیر به شما نحوه ایجاد چیدمان دوستونه را نشان می دهد که اگر سایز صفحه نمایش بیشتر یا مساوی ۷۶۸ پیکسل بود. اما اگر کمتر از آن بود بصورت چیدمان تک ستونه رندر می شود.

.column {
    width: 48%;
    padding: 0 15px;
    box-sizing: border-box;
    background: #93dcff;
    float: left;
}
.container .column:first-child{
    margin-right: 4%;
}
@media screen and (max-width: 767px){
    .column {
        width: 100%;
        padding: 5px 20px;
        float: none;
    }
    .container .column:first-child{
        margin-right: 0;
        margin-bottom: 20px;
    }
}

.column {

width: 48%;

padding: 0 15px;

box-sizing: border-box;

background: #93dcff;

float: left;

}

.container .column:first-child{

margin-right: 4%;

}

@media screen and (max-width: 767px){

.column {

width: 100%;

padding: 5px 20px;

float: none;

}

.container .column:first-child{

margin-right: 0;

margin-bottom: 20px;

}

در پرژوه نهایی دوره طراحی وب نت پارادیس که یک وبسایت فروشگاهی بود تماما از تکنیک مدیا کویری ها و همچنین فلکس باکس بصورت عملی برای ریسپانسیو کردن صفحه وب استفاده کردیم.

امیدوارم از آموزش مدیا کوئری در CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

لغو پاسخ

رسول ۲۴ آذر ۱۳۹۹

سلام و خسته نباشید. یک سوال داشتم. ریسپانسیو کردن باید بعداز طراحی قالب اعمال بشه یا اینکه طراح باید وقتی داره کدهای قالب رو مینویسه، همزمان حواسش به این موضوع باشه؟

پاسخ

حسن شفیعی ۲۴ آذر ۱۳۹۹

سلام. ممنون.
بعد از کد نویسی هر بخش همونجا ریسپانسیو کنید چون بعدا سنگین میشه و کار سخت تر .
مثلا بخش هدر رو زدید شروع کتید به ریسپناسیو کردن و به اینصورت پیش برید

پاسخ

ارمان ۴ بهمن ۱۳۹۸

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

پاسخ

حسن شفیعی ۴ بهمن ۱۳۹۸

سلام. ممنون.
هر دو آموزش زیر را دنبال کنید :
https://netparadis.com/css-tutorial-46-css3-flexible-box-layouts-1
https://netparadis.com/tutorials/web-design
موفق باشید.

پاسخ

داریوش ۱۸ آذر ۱۳۹۸

سلام.ممنون از آموزش های خوبتون
مدیاکوئری استانداردی که در سایت هایی که از بوت استرپ استفاده نکردن چیه؟

پاسخ

حسن شفیعی ۲۱ آذر ۱۳۹۸

سلام. خوشحالیم که مفید واقع شده.
در این صفحه مدیاکویری های استاندارد قرار گرفته :
https://css-tricks.com/snippets/css/media-queries-for-standard-devices
موفق باشید.

پاسخ

آموزش مدیا کوئری در CSS3

سینتکس مدیا کوئری

نوع مدیا

ویژگی های مدیا

مدیا کوئری ها و طراحی ریسپانسیو

تغییر عرض ستون ها بر اساس اندازه صفحه

تغییر چیدمان صفحه براساس اندازه صفحه

کتاب آموزش CSS به فارسی

آموزش CSS – بخش آخر (متفرقه)

آموزش فیلترها در CSS3 – بخش اول

آموزش CSS – ويژگی ‌Box-Sizing در CSS3

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه