محتوا
- 01. افزودن درخواستهای رسانه
- 02. آناتومی پرسش رسانه
- 03. یک چیز دیگر ...
- 04. انتخاب نقاط شکست
- 05. تنظیم تصاویر کوچک ما
- 06. نه فقط عرض
- دانش مورد نیاز: CSS و HTML متوسط
- نیاز دارد: ویرایشگر متن ، مرورگر مدرن ، نرم افزار گرافیک
- زمان پروژه: 1 ساعت (5 ساعت در کل)
- پرونده پشتیبانی
بخش نسبتاً جدیدی از مشخصات CSS ، بدون شک پرسش های رسانه ای هیجان انگیزترین جنبه طراحی وب پاسخگو و منطقه رسیده برای آزمایش های بیشتر است.
با پذیرفتن نیاز به طرح های تطبیقی ، برخی پرسش های رسانه ای را وسیله ای برای مقاوم سازی مجدد طرح های تطبیقی در سایت های با عرض ثابت موجود دانسته اند. در میان کسانی که از پوسته های پاسخگو استقبال کرده اند ، بسیاری از این کار را از منظر دسک تاپ انجام داده اند ، و محتوا و ویژگی ها را به عنوان باریک ترین قسمت دید مخفی می کنند.
در طول این آموزش ، ما یک روش جایگزین ، ابتدا تلفن همراه را انتخاب کرده ایم. اکنون ، وقتی می خواهیم پرس و جوهای رسانه ای را بگنجانیم ، می توانیم به آن فکر کنیم اضافه كردن ویژگی های افزایش صفحه نمایش املاک و مستغلات ، بدون اطمینان از اینکه مارک و طراحی سایت ما یک خط پایه قابل احترام را فراهم می کند.
امروز ، ما فراتر از نمونه کارهای الگوی خود حرکت خواهیم کرد و صفحات جداگانه مورد نیاز وب سایت خود را ایجاد خواهیم کرد. با این کار ، خواهیم دید که چگونه پرسش های رسانه ای ساخته می شود و آنها را به روشی کاملاً پاسخگو پیاده سازی می کنیم.
01. افزودن درخواستهای رسانه
با تکمیل اجزای موجود در نمونه کارها و خارج از محدوده هر طرح ، زمان آن است که آنها را به صفحات مختلف سایت ما منتقل کنیم.
ما با صفحه اصلی خود شروع می کنیم. از طراحی دسک تاپ ، می بینیم که در نمای وسیع تر ، چیدمان ما باید به شرح زیر باشد:
با اندازه گیری از طراحی خود ، می توانیم منطقه سند را در CSS به شرح زیر شرح دهیم:
.اسناد {
بالشتک: 0 5٪؛
}
. اصلی {
عرض: 74.242424242424٪؛ / * 784/1056 * /
شناور به سمت چپ؛
}
.مکمل {
عرض: 22.727272727273٪؛ / * 240/1056 * /
شناور: درست؛
}
همانطور که در قسمت دوم این آموزش آموختیم ، از فرمول زیر برای محاسبه درصد عرض این ستون ها استفاده می کنیم:
(هدف / زمینه) * 100 = نتیجه
هنگامی که مرورگر خود را تغییر اندازه می دهیم ، خواهیم دید که طرح دسک تاپ از کوچکترین صفحه تا بزرگترین مقیاس دارد. البته ، در اندازه های کوچک ستون ها بسیار باریک و طول خط ها آنقدر کوتاه هستند که خواندن مطالب به سختی انجام می شود. این چیدمان را فقط زمانی می خواهیم که فضای کافی برای کار وجود داشته باشد.
اینجاست که س quالات رسانه وارد می شود. با فرض اینکه این چیدمان فقط در مواقعی که مرورگر از 768px گسترده تر باشد ، می تواند CSS زیر را اضافه کند:
.اسناد {
بالشتک: 0 5٪؛
}
صفحهmedia و (حداقل عرض: 768 پیکسل) {
. اصلی {
عرض: 74.242424242424٪؛ / * 784/1056 * /
شناور به سمت چپ؛
}
.مکمل {
عرض: 22.727272727273٪؛ / * 240/1056 * /
شناور: درست؛
}
}
اکنون ، وقتی نمای دید از 768 پیکسل باریک تر باشد ، همه چیزهایی که در جستجوی رسانه وجود دارد نادیده گرفته می شوند. هر مرورگری که از نمایش داده های رسانه نیز پشتیبانی نکند ، نادیده گرفته خواهد شد.
02. آناتومی پرسش رسانه
برای درک اینکه در اینجا چه اتفاقی می افتد ، بیایید نحوه ساخت یک پرسش رسانه را بررسی کنیم. می توانیم آن را به دو قسمت تقسیم کنیم:
- صفحهmedia: اولین قسمت از یک پرس و جو رسانه است نوع رسانه. اگر هرگز سبک چاپ را در CSS خود قرار داده باشید ، می توانید این نحو را تشخیص دهید. همچنین می توانید نام نوع را از رسانه ها ویژگی در پیوند> عنصر به این دلیل که هر دو مجموعه تأیید شده انواع رسانه را که در مشخصات CSS 2.1 یافت می شوند ، می پذیرند.
- (حداقل عرض: 768 پیکسل): قسمت دوم پرس و جو. این شامل ویژگی مورد پرسش قرار بگیرند (در این حالت حداقل عرض ویوپورت) و مربوطه مقدار برای آزمایش (768 پیکسل).
هنگامی که ما در مورد طراحی وب پاسخگو صحبت می کنیم ، تمایل به عرض وجود دارد ، اما ویژگی های دیگری نیز وجود دارد که می توانیم آنها را آزمایش کنیم:
- (حداقل- | حداکثر) عرض و (حداقل- | حداکثر) ارتفاع: اینها به ما امکان می دهد عرض و ارتفاع نمای view (یعنی پنجره مرورگر) را جستجو کنیم.
- (حداقل- | حداکثر-) عرض دستگاه و (حداقل- | حداکثر-) ارتفاع دستگاه: اینها به ما امکان می دهد عرض کل نمایشگر را پرس و جو کنیم. طبق تجربه من ، معمولاً منطقی تر است که طرح بندی ها بر روی ویوپورت باشد تا صفحه نمایش.
- گرایش: می توانید بلافاصله به امکانات اینجا فکر کنید. به برنامه هایی فکر کنید که براساس جهت تلفن شما محتوای مختلفی را نشان می دهند - در وب نیز همین امکان وجود دارد.
- (حداقل- | حداکثر) نسبت ابعاد: این به ما امکان می دهد طرح ها را بر اساس نسبت پنجره مرورگر تطبیق دهیم ...
- (حداقل- | حداکثر-) نسبت ابعاد دستگاه: … و این به ما اجازه می دهد تا بر اساس نسبت ابعاد دستگاه ، همین کار را انجام دهیم. اوون گریگوری سال گذشته مقاله ای شگفت انگیز نوشت که در آن چگونگی استفاده از این پرس و جو برای اتصال طرح های خود به دستگاه هایی که روی آنها قرار دارد ، بررسی شد.
- (حداقل- | حداکثر) تک رنگ: همچنین می توانیم بررسی کنیم که آیا دستگاه دارای صفحه نمایش تک رنگ است یا خیر. تصور کنید که اگر دستگاه های Kindle مرکب الکترونیکی آمازون دروغ نگویند و صفحه نمایش خود را به عنوان رنگ معرفی نکنند ، چقدر مفید خواهد بود!
قسمت آخر پرسش ما احتمالاً مفیدترین است. با استفاده از و، ما می توانیم چندین ویژگی را در یک درخواست جستجو کنیم. مثلا:
صفحه نمایش @ و (حداقل عرض: 768 پیکسل) و (جهت: چشم انداز) {
...
}
همانطور که می بینید ، پرسش های رسانه ای می توانند به ما کمک کنند تجربیات نسبتاً جذابی را بسازیم - و من فقط سطح را لمس کردم. اگر به دنبال کمی خواندن هنگام خواب هستید ، می توانید کار بدتری از خواندن مشخصات جستجوی رسانه W3C باشد که تمام ویژگی هایی را که می توانیم برای آنها آزمایش کنیم ، توصیف می کند.
03. یک چیز دیگر ...
حتی اگر ما پرس و جوهای رسانه ای را در CSS خود گنجانده ایم ، اگر سایت خود را در دستگاه تلفن همراه مشاهده کنیم ، متوجه خواهید شد که سایت ما همچنان در حال ارائه است به گونه ای که صفحه نمایش آن از 768px گسترده تر است.
برای درک اینکه چرا این اتفاق می افتد ، باید یک درس مختصر تاریخ بخوانیم.
وقتی آیفون اصلی در سال 2007 معرفی شد ، یکی از مهمترین نکات فروش آن امکان مرور "وب واقعی" بود ، حتی اگر این به معنای سایت های دارای دسک تاپ با عرض ثابت باشد که برای قرار گرفتن در صفحه کوچک آن باید خرد شوند. آیفون قبل از کوچک کردن صفحات وب برای متناسب کردن صفحه نمایش با عرض 320 پیکسل ، قادر بود این کار را با گزارش 980 پیکسل نمایشگر خود انجام دهد.
اما آیفون قبل از ظهور طراحی واکنش گرا معرفی شد. اکنون که نویسندگان در حال طراحی سایت هایی هستند که برای موبایل طراحی شده اند ، این ویژگی کمتر کاربرد دارد. خوشبختانه ، اپل وسیله ای برای دور زدن این رفتار را در نظر گرفت ، و از آنجا که توسط سایر تولید کنندگان پذیرفته شده است ، تقریباً عملاً استاندارد این به سادگی شامل اضافه کردن یک تک است متا عنصر نشانه گذاری ما:
meta name = "viewport" content = "basic-scale = 1.0، width = device-width" />
این به مرورگرهای آگاه از viewport می گوید که یک وب سایت نباید کوچک شود و عرض پنجره مرورگر باید همانند عرض کلی دستگاه باشد. هنگامی که این خط را اضافه کردیم ، وب سایت ما با طرح مورد نظر ظاهر می شود:
04. انتخاب نقاط شکست
بیایید به جستجوی رسانه خود بازگردیم:
صفحهmedia و (حداقل عرض: 768 پیکسل) {
...
}
مقادیری که در آن چیدمان سازگار است معمولاً به عنوان نقاط شکست نامیده می شوند. اگر بخاطر بیاورید ، در قسمت دوم گفتم که استفاده از پیکسل نشانه ای از تفکر بی پاسخ است ، اما در اینجا من 768 پیکسل را انتخاب کرده ام ، احتمالاً به این دلیل که عرض دستگاه آشنا است.
به جای انتخاب نقاط انفصال بر اساس ویژگی های دستگاه های محبوب ، بررسی مقادیر مشتق شده از محتوای ما ، به عنوان مثال طول های راحت خط برای خواندن یا حداکثر اندازه تصویر ، می تواند موثرتر باشد.
با توجه به اندازه بودن نوع ما با استفاده از نامه های الکترونیکی ، به نظر می رسد استفاده از نامه های الکترونیکی نیز برای درخواست های رسانه ای ما منطقی باشد. در واقع انجام این کار یک مزیت اضافی نیز دارد. وقتی کاربر متن را در مرورگر تغییر اندازه می دهد ، صفحات با استفاده از نقاط شکست کوچکتر سازگار می شوند. وب سایت ما نه تنها بر اساس اندازه ویوپورت ، بلکه اندازه قلم نیز سازگار خواهد بود. در واقع ، فقط وقتی دیدم جرمی کیت پرسش های رسانه ای مبتنی بر آن را نشان می دهد ، فهمیدم که آنها می توانند چقدر قدرتمند باشند.
اگرچه طراحی ما ممکن است نشانه ای از نقاط شکست احتمالی باشد ، اما اغلب بهترین راه برای انتخاب آنها آزمایش است. با تنظیم عرض پنجره مرورگر ، من تصمیم گرفتم که 800px عرض خوبی است که می توان آن را به یک طرح پیچیده تر تغییر داد.
چگونه 800px را در ems بیان می کنیم؟ باز هم ، ما می توانیم از فرمول خود استفاده کنیم ، اما زمینه چیست؟ هنگام محاسبه ems برای نمایش داده های رسانه ، متن همیشه اندازه قلم پیش فرض مرورگر است صرف نظر از اینکه این مقدار در CSS شما جایگزین شده است. این پیش فرض معمولاً 16 پیکسل است که به ما می دهد:
800 / 16 = 50
اکنون می توانیم پرس و جو رسانه خود را مانند این موارد به روز کنیم:
صفحهmedia و (عرض حداقل: 50em) {/ * 800px * /
...
}
05. تنظیم تصاویر کوچک ما
شما به یاد می آورید که در قسمت 2 ما به تصاویر کوچک خود سبک می دهیم تا پاسخگو باشد. اما هنگامی که تصاویر درون این عکسها به پهنای کامل خود می رسند ، ناحیه ای از فضای سفید در سمت راست هر تصویر ظاهر می شود. باز هم ، پرس و جوهای رسانه ای به ما امکان می دهند این مشکل را برطرف کنیم.
در اینجا CSS اصلی ما است:
ol.media li.media-item {
background-color: #fff؛
حاشیه: 0 4.16666666667٪ 4.16666666667٪ 0؛
عرض: 47.91666666667٪؛
شناور به سمت چپ؛
}
ol.media li.media-item: nth-child (2n) {
margin-right: 0؛
}
نقطه ای که این فضای سفید در آن ظاهر می شود دقیقاً همانطور است که مرورگر از 560px گسترده تر می شود.ما این مقدار را انتخاب می کنیم که در آن برای نمایش سه تصویر کوچک در هر ردیف جایگزین می شود. ما می توانیم این کار را با اضافه کردن CSS زیر انجام دهیم:
صفحهmedia و (عرض عرض: 35em) {
.media-item {
عرض: 30.612244897959٪؛ / * 240/784 * /
حاشیه: 0 4.081632653061٪ 1.1429em 0؛ / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margin-right: 0؛
}
}
توجه داشته باشید که نیازی به بازنویسی تمام سبک های مورد نیاز برای تصویر بند انگشتی موجود در این درخواست رسانه نیست ، فقط قسمت هایی را که می خواهیم آن را تغییر دهیم.
با مشاهده این تغییر در مرورگر ، متوجه خواهید شد که هیچ حاشیه ای در سمت راست هر تصویر کوچک وجود ندارد. زیرا قانون CSS زیر همچنان فعال است:
ol.media li.media-item: nth-child (2n) {
margin-right: 0؛
}
برای تنظیم مجدد این مقدار ، باید CSS را در درخواست رسانه خود اصلاح کنیم:
صفحهmedia و (حداقل عرض: 35em) {
.media-item {
عرض: 30.612244897959٪؛ / * 240/784 * /
حاشیه: 0 4.081632653061٪ 1.1429em 0؛ / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
حاشیه راست: 4.081632653061٪؛
}
.media-item: nth-child (3n) {
margin-right: 0؛
}
}
هنگام ایجاد نمایش داده های رسانه ای ، همیشه از مسائل ارث بری مانند این آگاه باشید.
06. نه فقط عرض
مهم است که به پرسش های رسانه ای فقط از نظر عرض ، بلکه متغیرهای دیگر نیز فکر کنید. به عنوان مثال ، ویدئو در صفحه مورد رسانه ما با کاهش ارتفاع دهانه نمای ، تا حدی پنهان است. ما این فناوری را داریم:
.media-object-wrapper {
بالشتک پایین: 56.25٪؛
عرض: 100٪
قد: 0؛
موقعیت: نسبی؛
}
صفحهmedia و (حداکثر ارتفاع: 35em) و (جهت: چشم انداز) {/ * 560px * /
.media-object-wrapper {
عرض: 60٪
بالشتک پایین: 33.75٪؛
}
}
من برای جستجوی بیشتر این رفتار حتی یک پرسش جهت گیری قرار داده ام.
ما می توانیم رویکرد مشابهی را برای سایر قسمتهای طراحی خود دنبال کنیم ، پس از تغییر مکان در نسخه بزرگتر هدر ، و انتقال پیوندهای ناوبری به بالای صفحه.
- صفحه اصلی پاسخگو ما را مشاهده کنید
- صفحه مورد رسانه پاسخگو ما را مشاهده کنید
و حالا ما آن را در اختیار داریم! ما یک وب سایت پاسخگو ساخته ایم - و با یک روز وقت اضافی! خوب ، نه کاملا طرح بندی های انعطاف پذیر ، تصاویر و نمایش داده های رسانه ای تنها شروع روند طراحی پاسخگو است.
فردا: در قسمت آخر این آموزش ، ما فراتر از طراحی وب پاسخگو خواهیم رفت و بررسی خواهیم کرد که چگونه می توان وب سایت هایی با پاسخگویی واقعی ایجاد کرد.
پل یک طراح تعامل مستقر در برایتون انگلیس است. او هنگام ساخت رابط های ساده و در عین حال جذاب که بومی وب هستند ، خوشحالتر است.
