نحو برای هر دو عبارت مین عرض و حداکثر عرض رسانه
طراحی وب پاسخگو یک رویکرد برای ایجاد صفحات وب است که در آن صفحات می توانند به طور پویا پوسته و ظاهر خود را بر اساس اندازه صفحه نمایش بازدید کننده تغییر دهند. صفحه نمایش بزرگ می تواند یک طرح مناسب برای آن نمایشگرهای بزرگتر دریافت کند در حالی که دستگاه های کوچکتر مانند تلفن های همراه می توانند همان وب سایت را که در قالب صفحه کوچکتر مناسب است، دریافت کنند. این رویکرد یک تجربه کاربری بهتر برای همه کاربران را فراهم می کند و حتی می تواند به بهبود رتبه بندی موتورهای جستجو کمک کند. بخش مهمی از طراحی وب پاسخگو CSS Media Queries است.
پرس و جوهای رسانه مانند عبارات شرطی کمی در فایل CSS وب سایت شماست، به شما این امکان را می دهد که قوانینی خاص CSS را تنظیم کنید که فقط یک بار شرایط خاصی را تحقق می بخشد - مانند زمانی که اندازه صفحه نمایش بالاتر یا پایین تر از آستانه های معین است.
پرس و جو رسانه در عمل
پس چگونه از پرس و جوی رسانه در یک وب سایت استفاده می کنید؟ در اینجا یک مثال بسیار ساده است:
- شما با یک سند HTML خوب و بدون هیچ گونه سبک بصری (یعنی آنچه که برای CSS است)
- در CSS فایل شما، شما می توانید شروع به همانطور که شما به طور معمول توسط یک ظاهر طراحی شده صفحه و تنظیم پایه برای چگونگی نگاه وب سایت. بگو می خواهی اندازه فونت صفحه 16 پیکسل باشد، شما می توانید این CSS را بنویسید: body {font-size: 16px؛ }
- در حال حاضر، ممکن است بخواهید این فونت را برای صفحات بزرگتر که دارای املاک فراوان هستند، افزایش دهید. این جایی است که Queries Media وارد شده است. شما Query Media را مانند این می کنید:media screen (min-width: 1000px) {}
- این نحو یک درخواست رسانه ای است. شروع به کار باmedia برای ایجاد پرس و جو رسانه ای خود. بعد "نوع رسانه" را تنظیم کنید، که در این مورد "صفحه نمایش" است. این به صفحه نمایش کامپیوتر، رایانه لوحی، تلفن، و غیره مربوط می شود. در نهایت، «ابزار رسانه ای» را با «ابزار رسانه ای» متوقف کنید. در مثال بالا ما "متوسط عرض: 1000 پیکسل" است. این به این معنی است که پرسشنامه رسانه برای نمایشگرهایی با عرض حداقل 1000 پیکسل دراز خواهد کشید.
- بعد از این عناصر Query Media، شما می توانید یک باز و بسته شدن مچ دست را مانند آنچه که در هر قانون عادی CSS انجام می دهید، اضافه کنید.
- گام نهایی به یک پرس و جو رسانه ای این است که قوانین CSS را که می خواهید اعمال کنید بعد از این شرایط رعایت کنید اضافه کنید. شما این قوانین CSS را از بین پرانتزهای فیشینگ که شامل Query Media هستند اضافه می کنید، مانند این:media screen (min-width: 1000px) {body {font-size: 20px؛ }
- هنگامی که شرایط Query Media دیدار می شود (پنجره مرورگر حداقل 1000 پیکسل عرضی است)، این سبک CSS اثر می گذارد، تغییر اندازه فونت سایت ما از 16 پیکسل که در اصل برای مقدار جدید 20 پیکسل ایجاد شده است.
افزودن سبک های بیشتر
شما می توانید به عنوان بسیاری از قوانین CSS در این پرسشنامه رسانه ای به عنوان مورد نیاز برای تنظیم ظاهر بصری وب سایت خود را. به عنوان مثال، اگر شما می خواهید نه تنها فونت را به 20 پیکسل افزایش دهید، بلکه رنگ تمام پاراگراف ها را به سیاه (# 000000) تغییر دهید، می توانید این را اضافه کنید:
media screen و (min-width: 1000px) {body {font-size: 20px؛ } p {color: # 000000؛ }}اضافه کردن پرس و جوهای رسانه ای بیشتر
علاوه بر این، می توانید پرس و جوهای رسانه ای بیشتری برای هر اندازه بزرگتر اضافه کنید، آنها را به لیست سبک خود اضافه کنید مانند این:
media screen و (min-width: 1000px) {body {font-size: 20px؛ } p {color: # 000000؛ {}media screen و (min-width: 1400px) {body {font-size: 24px؛ }}اولین پرس و جو های رسانه ای در عرض 1000 پیکسل با تغییر اندازه فونت تا 20 پیکسل ضربه زده می شود. سپس، هنگامی که مرورگر بالاتر از 1400 پیکسل بود، اندازه قلم دوباره به 24 پیکسل تغییر خواهد کرد. شما می توانید به عنوان بسیاری از پرس و جو رسانه ها به عنوان مورد نیاز برای وب سایت خاص خود را اضافه کنید.
حداقل عرض و حداکثر عرض
به طور کلی دو راه برای نوشتن پرس و جو های رسانه ای وجود دارد - با استفاده از min-width یا با max-width. تا کنون، ما شاهد "min-width" در عمل هستیم. این باعث می شود که پرس و جوهای رسانه ای یک بار مرورگر به حداقل حداقل عرض برسد. بنابراین پرس و جو که با استفاده از "min-width: 1000px" اعمال می شود، زمانی که مرورگر حداقل 1000 پیکسل عرض دارد. این سبک از پرس و جو رسانه مورد استفاده قرار می گیرد زمانی که شما در حال ساخت یک سایت در شیوه "تلفن همراه".
اگر از "max-width" استفاده می کنید، به شیوه ای متفاوت عمل می کند. یک پرس و جو رسانه ای از "حداکثر عرض: 1000px" هنگامی که مرورگر زیر این اندازه کاهش یافته است اعمال می شود.
با توجه به مرورگرهای قدیمیتر
یک چالش با پرس و جوهای رسانه ای، عدم پشتیبانی آنها در نسخه های قدیمی تر در اینترنت اکسپلورر است. خوشبختانه فایل های موجود در فایلی وجود دارد که می تواند پشتیبانی از Query های رسانه ای در آن مرورگرهای قدیمی را پشتیبانی کند و به شما اجازه می دهد از آنها در وب سایت های امروز استفاده کنید و در عین حال اطمینان حاصل کنید که نمایش آن سایت در نرم افزار مرورگر قدیمی شکسته نمی شود.
ویرایش شده توسط Jeremy Girard در تاریخ 1/24/17