بروز رسانی دی ۲۶ام, ۱۳۹۹ ۳:۰۴ بعد از ظهر
اردیبهشت ۱۴, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
اون زمانی که ما کلید, پریز, دکمه و همچنین لباس و همچنین کیف و همچنین قاب با شبه عناصر after, before می ساختیم یک عده انسان باهوش در فکر کردن و اندیشیدن کردن و اندیشیدن آن بودند که آن شبه عناصر چه کاربردهایی در ساخت صفحات وب می توانند داشته باشند. در آن مطلب به یکی از آن کاربردها اشاره می کنیم.
قبل از هرچیز بایستی و حتما شبه عناصر after: و همچنین before: را بشناسید.
همینطور بایستی و حتما با مفاهیم پایه ای طراحی واکنشگرا یا آن هم رسپانسیو نیز آشنا باشید.
یکی از راه هایی که می توانیم مدیا کوئری ها را در جاوااسکریپت تشخیص دهیم بهره بری و استفاده از متد matchMedia می باشد که می قدرت بصورت زیر از آن هم بهره بری و استفاده کرد:
if (window.matchMedia("(min-width: 400px)").matches)
/* حداقل عرض ۴۰۰ پیسکل می باشد */
else
/* عرض صفحه کمتر از ۴۰۰ پیکسل می باشد */
آیا آن تنها راه تشخیص عرض مدیا کوئری در جاوااسکریپت می باشد, یا راه حل دیگر (شاید بهتر)ی نیز وجود دارد؟
در آن روش کافی می باشد یک شبه عنصر را به عنصری مثل body
اضافه کنیم. و همچنین از ویژگی content
آن هم کمال سو بهره بری و استفاده را داشته باشیم
body:after
content: "bp-small";
display: none;
@media only screen and (min-width: 35em)
body:after
content: "bp-medium";
@media only screen and (min-width: 65em)
body:after
content: "bp-large";
سپس کافی می باشد با بهره بری و استفاده از متد Window.getComputedStyle محتوای داخل شبه عنصر after
را بصورت زیر در جاوااسکریپت داشته باشیم:
var afterContent = window.getComputedStyle(document.body, ':after').content;
بررسی کردن کد جاوااسکریپت آن ترفند خارج از حوصله آن مطلب می باشد ولی باید توجه داشت می توانید کد را در دموی زیر بررسی کردن کنید:
See the Pen Detecting media queries with Javascript by Mojtaba Seyedi (@seyedi) on CodePen.
در صورتی که از آن روش بهره بری و استفاده کنیم دیگر نیازی نیست که مدیا کوئری منظور را در جاوااسکریپت نیز مشخص کردن کنیم یا به عنوان یک متغیر جدا داشته باشیم.
همینطور هر زمان که اراده و تصمیم راسخ به تغییر مدیا کوئری در طرح بگیریم تنها و فقط مستلزم و نیاز می باشد که CSS را ویرایش کنیم و همچنین مستلزم و نیاز نیست نگران تغییر فایل های جاوااسکریپت پروژه باشیم.
جهت آنکه مطمئن باشید که می توانید به آن روش اعتماد کنید بایستی و حتما گفت که وبسایت و مرکز خبرهای جدید های بزرگی نظیر روزنامه گاردین در حال حاضر (اردیبهشت ۹۵) از آن روش بهره می برند.
در صورتی که بدنبال روش غیره ای جهت بررسی کردن هستید می توانید از کتابخانه Modernizr نیز بهره بری و استفاده کنید:
بهره بری و استفاده از آن کتابخانه جهت موضوع مورد بررسی کردن ما خیلی زیاد راحت می باشد. تنها و فقط کافی می باشد بصورت زیر عمل کنیم:
if (Modernizr.mq('(min-width: 900px)'))
// صفحه نرم افزار مرورگر اینترنتی از ۹۰۰ پیکسل بزرگتر می باشد
ولی باید توجه داشت همانطور که دیدن می کنید مجبور هستید که نقطه شکست را در جاوااسکریپت نیز بنویسید
در بسیاری از مواقع در کار ما بهترین راه حل وجود ندارد بلکه مناسب ترین راه حل را بایستی و حتما پیدا کرد. که مناسب ترین راه حل بر اساس پروژه مورد نظر و همچنین مخاطبان آن هم مطرح می می شود.
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
فروردین ۰۲, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0