گوشی های هوشمند در حال تبدیل شدن به بخشی جدایی ناپذیر از زندگی هستند، بنابراین به اشتراک بگذارید ترافیک موبایلبه طور پیوسته در حال رشد است. طرح‌بندی در HTML5 و CSS3 به شما امکان می‌دهد تا صفحات مرورگر دسک‌تاپ را با رابط رسانه تلفن همراه تطبیق دهید. یک دوره ویدیویی در مورد چیدمان تطبیقی ​​ایجاد شد تا بتوانید بر محیط حرفه ای مسلط شوید و سایت خود را راحت تر کنید.

نویسنده دوره "تطبیقی ​​HTML5 و CSS3" اولگ کاسیانوف یک توسعه دهنده وب با تجربه، بنیانگذار منبع اینترنتی JoomlaTown.net، وبلاگ نویس و سازنده آموزش برای مبتدیان و متخصصان با تجربه است.

طراحی سایت واکنش گرا – آموزش

هر درس تصویری همراه با تفسیر توضیحی نویسنده است. با ویژگی های استفاده از فناوری های HTML5 و CSS3 آشنا می شوید، مهارت های توسعه خود را بهبود می بخشید و نحوه ایجاد یک طرح بندی سازگار را یاد می گیرید.

دوره ویدیویی اولگ کاسیانوف شامل توجیهات نظری، تمرین و مطالب اضافی است. پاسخ سوالات زیر را دریافت خواهید کرد:

• عملکرد در طرح بندی HTML5 و CSS3 چیست.
• نشانه گذاری معنایی چیست
• نحوه کار با انواع مختلفاشیاء رسانه ای؛
• مراحل ایجاد صفحات فرود چیست؟
• چرا ترکیب انواع فرم های صفحه و تجسم ها مهم است.
• مشکلات اصلی در ایجاد نسخه موبایلسایت.

دوره "طرح بندی پاسخگو در HTML5 و CSS3" با قالب های کار، اسکریپت ها و برگه های تقلب همراه با کد همراه است. Oleg روند یادگیری را بسیار تسهیل می کند، به لطف آن می توان چندین برابر سریعتر کار با HTML5 و CSS3 را تسلط یافت.

HTML5 و CSS3 پاسخگو

نتایج دوره شما را منتظر نخواهد ماند: شما یاد خواهید گرفت که وضعیت فعلی را تجزیه و تحلیل کنید، پروژه یک منبع وب آینده را ببینید و همچنین تغییرات مفیدی ایجاد کنید. دوره آموزشی اولگ کاسیانوف به شما کمک می کند تا در چیدمان واکنش گرا در HTML5 و CSS3 تسلط پیدا کنید.

شما نمی توانید بدون HTML5 و CSS3 به راه دور بروید

سایت های مدرن و توسعه وب را دیگر نمی توان بدون HTML5 و CSS3 تصور کرد، هر چه که می توان گفت.
هر پروژه، هر مشتری به یک طرح‌بندی معتبر، متقابل مرورگر و مدرن HTML5 و CSS3 نیاز دارد که باید برای دستگاه‌های تلفن همراه تطبیق داده شود.
اگر می دانید چگونه در HTML5 و CSS3 تایپ کنید و پروژه را با دستگاه های تلفن همراه تطبیق دهید، می توانید با خیال راحت هزینه یک ساعت کار خود را افزایش دهید.
خوب، اگر یک وب سایت برای خود ایجاد می کنید، این دانش به بهتر، کاربردی تر و راحت تر شدن آن کمک می کند. به عنوان یک قاعده، این منجر به افزایش موقعیت ها، افزایش حضور و در نتیجه درآمد می شود.

آیا می دانید که ...

اکنون در نتایج جستجو(در TOP 10) Yandex 55٪ سایت هایی با طراحی تعاملیکه می تواند با دستگاه های تلفن همراه سازگار شود. این نشان می دهد که Yandex (و گوگل نیز) اولویت بیشتری به سایت هایی با طراحی تطبیقی ​​می دهد. آن ها مواردی که کاربر در آنها راحت است.
و HTML5 و CSS3 برای سایت اضافه شده است ویژگی های اضافی، که با آن می توانیم سایت را راحت تر کنیم.
هم برای کاربران و هم برای ربات ها.
صفحه فرود ( صفحه فرود, صفحه فرود) برای تبدیل بازدیدکنندگان به مشترک یا مشتری استفاده می شود.
همچنین گاهی اوقات برای تقسیم بندی ترافیک استفاده می شود.
یک صفحه فرود می تواند یک صفحه جداگانه در یک دامنه یا به عنوان بخشی از یک وب سایت کامل باشد.
در این مورد، سایت در جستجو تبلیغ می شود و صفحه فرود برای تبلیغات در Yandex.Direct، Google Adwods، Target Vkontakte و غیره استفاده می شود.
این ترکیب به شما امکان می دهد از انواع ابزارهای بازاریابی اینترنتی حداکثر استفاده را ببرید.
اکنون فرصتی وجود دارد که به سرعت همه اینها را در کار خود یاد بگیرید و به کار ببرید.

HTML5 + CSS3 + پاسخگویی + صفحه فرود
با این دوره شما قادر خواهید بود:

وب سایت ها و صفحات واکنش گرا ایجاد کنید
آنها را با دستگاه های تلفن همراه تطبیق دهید
از قدرت HTML و CSS در پروژه های خود یا مشتری استفاده کنید
هر صفحه فرود را ایجاد کنید: صفحات ضبط، صفحات اشتراک، صفحات فرود محصول و غیره.
افکت ها و اسکریپت های مختلف را به صفحه فرود اضافه کنید
ایجاد و استفاده از فرم های پیشرفته بازخوردو خیلی بیشتر.
با این دوره ویدیویی اصلا کار سختی نخواهد بود!

خلاصه دوره

معرفی

ویژگی های جدید در HTML5 و CSS 3 که فرآیند طرح بندی را ساده و تسهیل می کند.
نشانه گذاری معنایی - اسرار آن و آنچه برای آن است.
درج اشیاء رسانه - نحوه درج صدا و تصویر بدون پخش کننده.

بخش عملی

ایجاد گام به گام صفحه فرود.
از برنامه ریزی چیدمان، چیدمان هر بلوک با پیچیدگی های متفاوت، تا اتصال اسکریپت ها و کنترل کننده های php برای فرم ها
چرخ فلک / لغزنده، پیمایش صاف، دکمه ها، جن CSS، اعتبار سنجی فرم و غیره

اضافه کردن. مواد

مطالب اضافی شامل تمام اسکریپت ها و منابعی است که با آنها کار خواهیم کرد + برگه های تقلب با کدی که فقط باید آنها را کپی و در جای مناسب جای گذاری کنید.
و همچنین سایر منابع مفید.
تعداد درس های تصویری: 23

بعد از گذراندن این دوره چه کارهایی را می توانید انجام دهید؟

در آماده سازی

آشنایی با طرح PSD با فتوشاپ
تصاویر مورد نظر را از طرح PSD برش دهید
پیدا کردن طرح های زیباصفحه فرود و وب سایت ها
طراحی بلوک ها و مراحل چیدمان
ادغام نمادها در CSS Sprites
کار با PhpDesigner

از نظر چیدمان

اتصال فونت های زیبااز ذخیره سازی گوگل
از کلاس های شبه به طور موثر استفاده کنید
سایت را برای همه دستگاه های تلفن همراه تطبیق دهید
از 2 یا چند پس‌زمینه بلوک، انیمیشن، تبدیل، RGBA و غیره استفاده کنید.
با پرسش‌های رسانه @ کار کنید
درج نقشه های تعاملی Yandex
CSS sprites ایجاد کنید و سرعت بارگذاری صفحه را افزایش دهید
استفاده از سبک های از پیش طراحی شده (مشابه فریمورک هایی مانند بوت استرپ)

از نظر بهبود

ایجاد جلوه های شناور ("انیمیشن" در شناور)
پیمایش صاف به بلوک ها و دکمه "بالا" انجام دهید
اعتبار سنجی فرم های تماس با جی کوئری
با عبور تگ های UTM، فرم های بازخورد هوشمند ایجاد کنید
اتصال و پیکربندی اهداف در Ya.Metrika با استفاده از رویدادها
با بارگذاری سریعتر صفحات، آنها را سبک کنید
بررسی و رفع نقص در صفحات

نیکلاس مادورو، رهبر ونزوئلا در گفتگو با رافائل کورئا از شبکه RT گفت که دونالد ترامپ، رئیس جمهور ایالات متحده، علاقه زیادی به مردم آمریکای لاتین دارد. "من آشکارا صحبت می کنم ...

ترامپ جنگ با ایران را آخرین راه حل خواند
دونالد ترامپ رئیس جمهور آمریکا روز چهارشنبه گفت با توجه به حمله به تاسیسات نفتی عربستان سعودی صحبتی از جنگ با ایران نشده است، گزینه های زیادی وجود دارد. "گزینه های زیادی وجود دارد. یک گزینه افراطی وجود دارد ...

زلنسکی با پنس تلفنی گفتگو کرد
ولودیمیر زلنسکی، رئیس‌جمهور اوکراین با مایک پنس، معاون رئیس‌جمهور آمریکا تلفنی گفتگو کرد. این توسط "Strana.ua" گزارش شده است. رهبر اوکراین از پنس در رابطه با تمدید ...

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

حمله از یمن نیست: عربستان سعودی ایران را به حمله به پالایشگاه نفت متهم می کند
مقامات سعودی لاشه هواپیماهای بدون سرنشین و سایر هواپیماهایی که در شب شنبه 14 سپتامبر در پالایشگاه های دولتی رها شده بودند را به صورت علنی معرفی کردند. وزارت دفاع پادشاهی ...

واکنش ترامپ به کاهش نرخ بهره فدرال رزرو
دونالد ترامپ، رئیس‌جمهور آمریکا پس از اینکه فدرال رزرو آمریکا به کاهش نرخ پایه معروف شد، دوباره از عملکرد فدرال رزرو ناراضی بود. او در این مورد توییت کرد. وی خاطرنشان کرد: رئیس ...

اوکراین دوباره شرایطی را برای اجرای "فرمول اشتاین مایر" تعیین کرد.
هیئت اوکراینی در نشست عادی گروه تماس که روز چهارشنبه در مینسک برگزار شد، بار دیگر شرایط سختی را برای اجرای بندهای سیاسی توافقات مینسک توسط کیف تعیین کرد. این موضوع تایید شد...

جانسون و ترامپ درباره پاسخ مورد نیاز برای حمله به پالایشگاه‌های نفت عربستان گفت‌وگو کردند
لندن، 18 سپتامبر - ریانووستی، ماریا تابک. بوریس جانسون، نخست‌وزیر بریتانیا و دونالد ترامپ، رئیس‌جمهور آمریکا خواستار واکنش دیپلماتیک واحد از شرکای بین‌المللی شدند.

کلیچکو به پل رسید که به دلیل خطر انفجار مسدود شده بود
ویتالی کلیچکو، شهردار کیف گفت فردی که تهدید به منفجر کردن پل مترو در کیف کرده بود مست یا تحت تأثیر مواد مخدر بوده است. پیش از این، رئیس پلیس کیف ...

یونکر که از بلژیکی ها انتقاد می کرد به مستی متهم شد
رؤسای دو شهر بلژیک از ژان کلود یونکر رئیس کمیسیون اروپا خواستند رسما عذرخواهی کند که فرانسوی‌زبان‌ها در شهرهای بلژیک بی‌تحمل هستند.

مقابله نتانیاهو با اسرائیلی ها
بنیامین نتانیاهو نخست وزیر رژیم صهیونیستی درباره نتایج اولیه انتخاباتی که حزب ملی گرای لیکود در جایگاه دوم قرار دارد، اظهار نظر کرد. یه پست مرتبط هست...

"فرمول اشتاین مایر": کیف امتیازاتی در مورد دونباس داد
وزیر خارجه اوکراین وادیم پریستایکو موافقت کرد که از فرمول اشتاین مایر برای حل مناقشه در دونباس استفاده کند. این ابتکار منطقه را با شرایط ویژه ای...

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

قبل از اینکه بخوابید: بانک مرکزی مسدود کردن حساب های روس ها را قانونی دانست
"آنها خودشان را اداره می کنند": طرحی جدید برای "بازگرداندن" کریمه RIA Novosti Crimeans در صورتی که پوسیدگی را گسترش ندهد و دریچه ای از فرصت ایجاد کند، به اوکراین خواهد رفت. در این باره، به گفته آژانس فدرال ...

رسانه ها: نتانیاهو سفر خود به مجمع عمومی سازمان ملل را به دلیل اوضاع سیاسی کشور لغو کرد
بنیامین نتانیاهو نخست وزیر رژیم صهیونیستی هفته آینده برای شرکت در مناظره سیاسی عمومی هفتاد و چهارمین نشست مجمع عمومی سازمان ملل متحد به دلیل اوضاع سیاسی این کشور به نیویورک سفر نخواهد کرد.

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

ترامپ جایگزینی برای بولتون پیدا کرده است
مشاور امنیت ملی جدید رئیس جمهور ایالات متحده رابرت اوبراین خواهد بود که در حال حاضر به عنوان نماینده ویژه رئیس جمهور در امور گروگان ها خدمت می کند.

اوکراین آماده خروج نیروها از دونباس است
ولادیمیر کراوچنکو، فرمانده عملیات نیروهای مشترک (JFO) از آمادگی برای خروج تسلیحات از خط مرزی در دونباس خبر داد. وی در این باره در دیدار با یک دایمی ...

ضرب‌الاجل‌ها و نقشه‌های راه: طرح‌های ادغام روسیه و بلاروس
طرح ادغام روسیه و بلاروس می تواند توسط روسای جمهور ولادیمیر پوتین و الکساندر لوکاشنکو تا 8 دسامبر تصویب شود. "نقشه های راه" در 31 جهت توسعه یافته است. مسکو تا اول نوامبر...

برنده تصمیم نمی گیرد: چه کسی دولت اسرائیل را تشکیل می دهد؟
انتخابات زودهنگام پارلمانی در اسرائیل هنوز برنده مشخصی را در این رقابت نشان نداده است، اگرچه طبق داده های اولیه کمیسیون مرکزی انتخابات این کشور، بلوک راستگرای لیکود از رقیب خود پیشی گرفته است.

با ظهور دستگاه های تلفن همراه: تبلت ها و گوشی های هوشمند، قابلیت ایجاد طرح بندی تطبیقی ​​صفحات وب بسیار محبوب شده است.
این بدان معنی است که سایت باید به طور معمول در هر دستگاهی مشاهده شود. خوب، چه رسد به، اگر دقیقاً همان چیزی نباشد که در آن نمایش داده می شود کامپیوتر رومیزی، سپس به آن نزدیک شوید. نکته اصلی این است که کار با آن راحت است: مشاهده، جستجوی چیزی، فشار دادن دکمه ها و غیره.

من یک دوره کوتاه جالب و رایگان در مورد طرح‌بندی وب‌سایت واکنش‌گرا بر اساس HTML5 و CSS3 در شبکه پیدا کردم. آن را مطالعه کرد.
** با پرکردن فرم درخواست آزمون بالا یا پایین می توانید این دوره را برای خود دانلود کنید. **

جدید در HTML5 و CSS3

من تصمیم گرفتم بررسی کنم که آیا امکان (؟) ایجاد یک سایت برای همه دستگاه ها وجود دارد یا خیر. بدوناستفاده از تکنولوژی HTML5 و CSS3 .

دارم سعی می کنم!

در کدنویسی تایپ شده است "ANSI" و با سابقه خدمات کامل: "HTML 4.01 Transitional" ، به جای آنچه در قوانین مقرر شده است HTML5:

برچسب های جدید: سرفصل، بخش، مقاله استفاده نکرد. معلوم شد که چیدمان بلوک طبق معمول روی برچسب ها کافی است بخش .

جدید ویژگی فرمدر برچسب ها ورودی "جایگزین" (اشاره) در مرورگر IE8 نهکار کرد. در بقیه - کار کردن.

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

صفت "مقدار" هنوز برای وارد کردن مقادیر به فرم ها

مهم ترین چیز! ابتدا سایت روی یک مانیتور معمولی تایپ می شود و تنها پس از آن در برچسب سر درج یک خط کد:

این ورودی به مرورگر می گوید ( ** همانطور که در دوره توضیح داده شد!)، بنابراین او به درستی مقیاس بندی شده استمحتوای صفحه برای دستگاهی که استفاده می کنید.
اگر چه، در واقع، چنین رکورد مرورگر مطلقا چیزی نمی گوید. این یک "درخواست" برای موتورهای جستجو است.
اما آنها قبلاً اوه-او-خیلی "غیور" در مورد وجود / عدم وجود چنین ورودی در برچسب هستند سر به خصوص اخیرا بررسی شد!

با این حال باید گفت که مرورگرهای مدرن دستگاه های تلفن همراه، گویا هنوز خواندن «نامه های دیگران» را یاد گرفته اند.

**مثلا.هنگام آزمایش این خط کد، آن را به آن اضافه کردم ناسازگارصفحه وب سایت و... ... ... . و سپس به سرعت حذف شد!

پس از بررسی صفحه نمایش آن در تلفن هوشمند، دیدم که مرورگر گوشی هوشمند "وحشت" را نشان می دهد، یعنی. FULL SIZE صفحه را نشان داد و این قابلیت را فراهم کرد اسکرول افقی بلند.

ویژگی جدید برای برچسب ها img "srcset" در نسخه آزمایش شده "HTML 4.01" کار نمی کند!

یادآوری کنم و تاکید کنم که من هیچ سوال رسانه ای نکرد. تست ها!

نمونه های ورودی های جدول CSS

اول از همه، در مورد کدام (؟) بررسی می شود ویژگی های cssو چگونه (؟) آنها کار می کردند.

ملک پس زمینه-اندازه: پوشش; بهتر است استفاده نکن. نقاشی ها "برش" هستند، یعنی. فراتر از صفحه نمایش مانیتور بروید. برای دیدن کامل آنها باید بزرگنمایی کنید.

و بالعکس!

ملک پس زمینه-اندازه: حاوی; آثار بزرگ! در همه مرورگرها! بهینه برای "مرکز"نقشه ها. آنها است ترازو عالیهبرای هر اندازه مانیتور

به همین ترتیب.

همان خاصیت background-size: contain; عالی کار کرد "جانبی"نقشه ها، یعنی چپ راست. تلاش کرد!

نقشه های جانبی از طریق برچسب ها نمایش داده می شوند طول ، به آنها شناور می دهیم: چپ یا راست، اما اصلی!
نکته اصلی، که طراحی را به عنوان خروجی می دهد پس زمینه در 2 کاراکتر فضایی بدون شکست ، دادن اندازه متن, برابر با ارتفاع تصویر پس زمینه (** با کاهش اندازه متن، تصویر به نسبت، بدون اعوجاج کاهش می یابد).

نمودارهای خروجی زیر

  <— это HTML

Span#proba8 ( <— здесь CSS
پس زمینه: url(images/proba8.jpg) بدون تکرار.
شناور به سمت چپ؛
اندازه فونت: 240px;
پس زمینه اندازه: حاوی;
حاشیه: 020 پیکسل؛
بالشتک پایین: 0
}

نقاشی آزمایشی که طبق طرحی که در بالا ارائه شد، نمایش داده شد اندازه واقعی 210x240px. به خوبی سازگار شد و به طور کامل بر روی مانیتور نمایش داده شد وضوح 120x150.

همه چیز کار می کند! ولی!

با بررسی استفاده از چنین طرح خروجی در "چند ضلعی" خود، ظاهر قابل توجهی پیدا کردم فضاهای خالی قبل و بعد از نقاشی، هنگام مشاهده صفحه در تلفن هوشمند. این به ویژه قابل توجه بود وقتی به صورت عمودی مشاهده می شود. زوج!
حتی با وجود این واقعیت که در قوانین CSS نوشته شده بود: تورفتگی های بالا/پایین را بردارید!

به همین دلیل است که همه چیز نقشه های جانبیبرای خروجی این صفحه به روش معمول، بدون هیچ گونه "دغدغه" تطبیقی.

علاوه بر این، اندازه بزرگترین طراحی جانبی این امکان را به شما می دهد.

درست است، در این مورد جانبیتصاویر خیلی بزرگ نمایش داده می شوند که واقعاً با آنها مطابقت ندارد مرکزی(اقتباس) «همکاران»، اما... ... ... .
در اینجا هرکس بهترین را انتخاب می کند. من از بین "دو شر" ساده ترین را انتخاب کردم.

** و آخرین.فایل "صفر کردن"سبک ها reset.css به این صفحه متصل نشد برای چنین سایت های ساده ای نیازی به آن نیست. بله، و... ...من او را دوست ندارم. نوشیدنی-و-سیواش و سپس دوباره.

خوب جدی - سرعت دانلود. هر فایل اضافی است تماس سرور.

حالا چند خط در مورد اقتباس.

اولینمثالی از نوشتن کد برای کاهش دو فیلد ورودی (نام و ایمیل) در تگ های فرم به 200 پیکسل (در صورتی که در دستگاه های تلفن همراه مشاهده شوند) ارائه کرد. بنابراین، همانطور که در دوره کوتاه ارائه شد . ورود عجیب!

صفحه رسانه و (حداکثر عرض: 900 پیکسل) (

عرض: 200 پیکسل؛))

در واقع، کد درخواست رسانه باید متفاوت به نظر برسد.

@media (حداکثر عرض: 900 پیکسل) (
ورودی .subscribe, .subscribe input (
عرض: 200 پیکسل؛))

*پریم.استفاده كردن عرض ثابت، بهتر است آن را مشخص کنید حداکثر اندازه.

اندازه بهینه برای عرض ثابت 1200px± است

اینها "داستان های رسانه"یاد طرح افتادم اگر (شرط) (اجرا) از زبان ها: PHPو جاوا اسکریپت. با آنها، سبک های سایت را بسته به اندازه صفحه نمایش ها بازسازی می کنیم.

مرجع

برای کار صحیح با فونت ها، توصیه می شود اندازه آنها را نه در "px"، بلکه در "em" مشخص کنید و همچنین خود فونت ها را از به اصطلاح استفاده کنید. "پشته فونت CSS ایمن".

من یک نقاشی ویژه در فتوشاپ انجام دادم که از آن می توانید بفهمید که متعلق به کدام فونت است "بی خطر"و مهمتر از همه - چرا (؟!):

1em = 16px

درست است، باید گفت که چنین ترجمه ای نسبتاً "مشروط" است، اگرچه در مینی دوره کلمه ای در این مورد وجود ندارد!

شما می توانید با جزئیات در مورد واحدهای اندازه گیری موجود و نحوه تبدیل آنها به یکدیگر در یک مقاله عالی از آرشیو پیوست آشنا شوید.

واحدهای نمونه برای چیدمان تطبیقی

تلاش کرد. برخی از اندازه های قلم از طریق این واحدها تجویز می شود. کار کردن! اما من بیشتر به کار با پیکسل عادت دارم. در اینجا آنها همچنین در تحمیل این صفحه استفاده کردند.

به خصوص که پیکسل ها، به نظر من، تناسب کاملبرای چیدمان تطبیقی، زیرا آنها دقیقاً به آنها "گره خورده اند". اندازه و وضوح مانیتور دستگاه های مورد استفاده

به عبارت دیگر، هر دستگاه اندازه پیکسل خاص خود را خواهد داشت و اگر از یک واحد به واحد دیگر "انقباض" نکنید، بلکه همه چیز را در همان واحدهای اندازه گیری بیان کنید، نتیجه مثبت خواهد بود!

آنچه در واقع هنگام مشاهده این صفحه در دستگاه خود مشاهده می کنید.

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

بنابراین، با کمی تمرین در این صفحه آزمایشی، روی انواع طرح بندی های تطبیقی ​​"تف" کردم و شروع به تایپ کردن به روش معمول و آشنا برای من کردم. خسته!

خوب، جدی، من در مورد آن در انتهای صفحه نوشتم.

کسانی که هنوز به سازگاری نیاز دارند باید به ابزارهایی که قبلاً در مرورگرها تعبیه شده است توجه کنند.

ابزارهای مفید توسعه وب

برای توسعه طرح تطبیقی ​​در مرورگر فایرفاکسابزارهای عالی(!) وجود دارد.

این تب با فشار دادن کلید F12 باز می شود

دکمه "طراحی تطبیقی"به شما امکان می دهد ببینید صفحه در اندازه های مختلف مانیتور و با جهت گیری های مختلف (عمودی/افقی) چگونه به نظر می رسد.

جزئیات نحوه استفاده از دکمه این ابزار در مینی دوره ذکر شده توضیح داده شده است.

درست است، می خواهم بگویم که خودم ترجیح می دهم بررسیساخته شده در دستگاه های واقعی ، که "تغییر" مرورگرها را از بین می برد.
دکمه، البته، مطمئناً بسیار مفید است، و بسیار کمک می کند، اما... ... ...

برای کسانی که چنین فرصتی برای بررسی صفحات وب خود ندارند، می توانم یک منبع جالب برای بررسی سازگاری توصیه کنم: "ابزارهای عجیب و غریب" (در یک پنجره جدید باز می شود).

**ولی! نیاز به یادآوری!
فقط صفحات را نشان می دهد قبلا در اینترنت آپلود شده است.
علاوه بر این - سرور او اغلب "سقوط" می کند (یعنی در دسترس نیست).

به طور کلی، یک علامت مطمئن طرح تطبیقی ​​صحیح - بدون اسکرول پایین.

آخرین چیزی که باید بدانید: دستگاه های موبایل واقعیسایت‌ها متفاوت به نظر می‌رسند، نه آن‌گونه که توسط سرویس‌های تأیید مختلف نشان داده می‌شوند.

نتیجه گیری، نتیجه گیری

همانطور که قبلاً نوشتم ، با کمی تمرین در اینجا ، در این صفحه ، روی سازگاری "تف" کردم و شروع به تایپ کردن به روش معمول کردم. و این تصادفی نیست!

اولا:پیچیدگی طرح چند برابر افزایش می یابد و با آن اندازه کد CSS نیز افزایش می یابد.
آنچه بد است، در اینجا به تفصیل: "توسعه وب سایت"(در یک پنجره جدید).

ثانیا:و بدون «خرد تطبیقی» می‌توانید سایت‌هایی بسازید که به طور معمول در دستگاه‌های تلفن همراه نمایش داده می‌شوند، که برای آنها نیاز به ارائه بیشتر است. درست شدعرض
مثال: "صفحه شخصی" (در یک پنجره جدید باز می شود).

ثالثا:از قبلی پیروی می کند، زیرا محتوا درست شداگر سایت در رایانه ای با نمایشگر بزرگ بازدید شود، صفحات روی مانیتور "لکه دار" نمی شوند.

چهارم:من اغلب سایت ها را می بینم تطبیقی ​​در نظر گرفته می شود، اما برای خودشان محتوا قطع شده استبنابراین حساب براینوع آنها کاهش 2-3 برابر!

پنجم:از نکته چهارم نتیجه می گیرد. پس تفاوت (؟!) آن من چیست صفحات غیر پاسخگوبر روی گوشی های هوشمند باید از هم جدا شوندانگشتان به اندازه دلخواه بله، و آن! فقط برای راحتی مشاهده محتوا دست نخورده است!

به هر حال، گوشی های هوشمند برای سایت من حیاتی نیستند. تا آنجا که، بیش از 97 درصدبازدیدکنندگان از رایانه ها و تبلت های معمولی به آن می آیند و کمتر از 3 درصد از گوشی های هوشمند.

شما می توانید این «فهرست عزاداری» را ادامه دهید، اما به نظر من کافی است. به اندازه کافی در مورد دلایلی که من از چیدمان تطبیقی ​​خسته شده بودم، گفته شد مطالعه کرداما اعمال کنید نهقصد دارم به.

برای چی؟!

چرا کاری که می تواند آسان تر باشد را سخت تر کنیم؟! بدون هیچ گونه «رقص تطبیقی ​​شامانی».

نتیجه - نیازی نیست!

این نتیجه ای است که من کردم برای خودتاز همه موارد فوق در پایان، کاملاً در هر دستگاهی: یک رایانه معمولی، تبلت یا تلفن هوشمند، سایت قابل مشاهده است!

اگر چیزی به سختی قابل مشاهده است، می توانید آن را با انگشتان خود فشار دهید. هیچ چیز وحشتناکی نیست! دستگاه های الکترونیکی مدرن هوشمند هستند! آنها به شما این امکان را می دهند که میزان دید صفحه نمایش مانیتور را افزایش دهید.

علاوه بر این، سعی کنید برای همه اندازه‌های ممکن دستگاه‌های موجود، در کد "به‌طور مداوم" آن را افزایش دهید - مدینه فاضله!

به عنوان مثال، روز گذشته برادرزاده من خرید جدید خود را نشان داد. ساعت-گوشی هوشمندکمی بزرگتر از قوطی کبریت
پس چی؟!
عجله کردن حالا "سر دراز" برای نوشتن کد زیر ابعاد قوطی کبریت؟! و سپس کامپیوتری به اندازه یک سنجاق سینه وجود خواهد داشت (یا شاید قبلاً ظاهر شده باشد). پس چی؟!
دوباره کد رو عوض کنم؟ بله، خوب، در انجیر، چنین "سایت های دردسر" را انجام دهید! ساده تر... ...

در واقع، کل منبع من برای کسانی در نظر گرفته شده است که می خواهند یاد بگیرند که چگونه وب سایت های ساده بسازند و با لذت آنها را بسازند و به دنبال خود نباشند. "سردرد". یه چیزی شبیه اون... ... ...

با این حال، این نظر شخصی من است. هرکی هنوز میخواد اینکارو کنه بذار بیشتر نگاه کنه.

اضافه مهم

برای کسانی که می خواهند انواع چیدمان ها را بهتر درک کنند، به شدت توصیه می کنم اولین(قبل از مطالعه مینی دوره) دو مقاله خوب و جالب را دانلود و مطالعه کنید: "طرح بندی تطبیقی ​​یا نسخه موبایل"و "طراحی تطبیقی".

و علاوه بر آن!

لزوما مقاله را از آرشیو پیوست زیر بخوانید.

چرا لازم است؟

من آن را با استفاده از مطالبی از کتاب طراحی وب توسط یک طراح مشهور در Runet و صحبت های نویسنده کتاب در مورد سیارنسخه های وب سایت به شدت متفاوت استاز آنچه در آرشیو قبلی می توانید بخوانید.

ولی مهم ترین چیز(!)- به دلیل دیگری

و با پر کردن این فرم می توانید یک دوره آموزشی ویدیویی جالب در مورد چیدمان تطبیقی ​​دریافت کنید.

کتاب جدیدی با عنوان «بازاریابی محتوای رسانه‌های اجتماعی: چگونه وارد ذهن مشترکان شویم و آنها را عاشق برند خود کنیم» منتشر کرده‌ایم.

به ویژه، این فناوری به طور فعال برای یکسان جلوه دادن سایت در انواع مختلف دستگاه ها استفاده می شود: رایانه ها / لپ تاپ ها و تلفن های هوشمند / تبلت ها با اندازه های مختلف نمایشگر.

امروزه یک وب سایت واکنش گرا با استفاده از زبان نشانه گذاری HTML5 و شیوه نامه های آبشاری CCS3 ایجاد می شود. اما تا زمانی که فناوری های مربوطه به استاندارد همه مرورگرهای محبوب تبدیل شدند، زبان برنامه نویسی جاوا اسکریپت برای اهداف مربوطه استفاده می شد. حتی قبل از آن (قبل از سال 2010)، آنها مجبور بودند چندین نسخه از صفحات مشابه را ایجاد کنند، اما با نشانه گذاری های متفاوت، به طوری که سایتی که توسعه داده اند به درستی در صفحه های مختلف نمایش داده شود.

چرا به طرح بندی صفحه واکنش گرا نیاز دارید؟

تا همین اواخر، هنگام بازدید از بسیاری از سایت‌ها در پایین مرورگر، می‌توانید نوار لغزنده‌ای را ببینید که صفحه را به صورت افقی پیمایش می‌کند. این اتفاق می افتد، به عنوان مثال، اگر پنجره مرورگر اینترنت به تمام صفحه گسترش نیافته باشد، اما منطقه نسبتا کمی از آن را اشغال کند. همچنین تقریباً همیشه می‌توان دید که وضوح صفحه‌ای که تصویر روی آن نمایش داده می‌شود 800 در 600 یا حتی بیشتر از آن 640 در 480 پیکسل باشد.

امروزه، حتی دارندگان دستگاه های تلفن همراه به ندرت با این مورد مواجه می شوند. و دلیل این امر نه تنها در این واقعیت است که وضوح نمایشگرهای مدرن HD یا بالاتر است، بلکه در این واقعیت است که طرح‌بندی صفحه واکنش‌گرا تقریباً به استاندارد تبدیل شده است.

چرا و چه زمانی طراحی واکنشگرا ظاهر شد؟

در آغاز دهه دوم قرن بیست و یکم، نیاز شدیدی به ایجاد فناوری هایی وجود داشت که امکان توسعه صفحات وب جهانی را فراهم می کرد. پیش نیازهای اصلی که باعث ایجاد و توسعه طراحی تطبیقی ​​شد:

• هجوم گسترده کاربران جدید به اینترنت؛
• ظهور بسیاری از دستگاه ها با وضوح های مختلف صفحه نمایش؛
• فشار موتورهای جستجو، که شروع به اعمال تحریم ها علیه سایت هایی کردند که انواع مختلفی از صفحات با محتوای مشابه داشتند.

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

مدتی بعد، یکی دیگر از پادکست‌های معروف، اضافه‌هایی را به مفاهیمی که همکارش درباره آن صحبت می‌کرد، پیشنهاد کرد.

طرح تطبیقی ​​با چه چیزی و چگونه ایجاد می شود؟

قبل از پرداختن به این سوال، که مربوط به نحوه ساخت یک طرح تطبیقی ​​است، لازم است به طور خلاصه فناوری های اصلی مورد استفاده را در نظر بگیریم. اکنون دو مورد از آنها وجود دارد: HTML5 و CSS3. تا همین اواخر از HTML4 و CSS2 استفاده می شد، اما برای ایجاد یک طراحی جهانی با آنها، باید از جاوا اسکریپت نیز استفاده می کرد.

CSS3 نسل بعدی Cascading Style Sheets است. این فناوری برای ایجاد قوانینی برای نمایش عناصر صفحه در مرورگر کاربر در نظر گرفته شده است. با استفاده از آن، می توانید مشخص کنید، برای مثال، اندازه یک عنصر در وضوح صفحه نمایش مشخصی از کاربر چه اندازه ای باید داشته باشد، یا یک قانون تعیین کنید که همیشه باید درصد مشخصی از فضا را اشغال کند (100٪ - پر کردن کل منطقه کاری . مرورگر).

در نسل سوم بود که قاعده "پرسش‌های رسانه‌ای" ظاهر شد که با استفاده از آن طراح طرح‌بندی می‌تواند برای هر مجوز خاص کلاس‌های جداگانه ایجاد کند.

یک نکته بسیار مهم!

شخصی که قصد دارد از CSS3 برای طراحی ریسپانسیو استفاده کند باید بداند که برخلاف CSS2، Cascading Style Sheets 3 از پیکسل ها استفاده نمی کند، بلکه از درصد برای تعیین اندازه اشیا استفاده می کند.

در مورد HTML5، مستقیماً صفحه را علامت گذاری می کند، یعنی نشان می دهد که عناصر خاصی باید در کجا قرار گیرند. برای اینکه اشیا با وضوح تنظیم شوند، پارامترهای تگ HTML کلاس هایی را مشخص می کنند که قبلاً با استفاده از CSS3 ایجاد شده اند.

یک مثال ساده از طرح‌بندی واکنش‌گرا

برای درک اینکه چیدمان واکنش‌گرا چیست، مثال‌ها باید تا حد امکان ساده باشند. بنابراین، بیایید گزینه ای را در نظر بگیریم که در آن تصویر آماده شده به طور خودکار با وضوح منطقه کاری مرورگر تنظیم می شود.

ابتدا با استفاده از HTML خود عنصر را در صفحه قرار می دهیم:

تگ DIV نشان می دهد که هر چیزی که در آن وجود دارد یک بلوک جداگانه است. هنگامی که تعداد زیادی از این بلوک ها در صفحه وجود دارد، ویژگی "class" مشخص می شود. این برای مرورگر لازم است تا بفهمد کدام قانون را برای یک بلوک خاص اعمال کند.

اکنون باید خود قانون را ایجاد کنید، به اصطلاح

ظرف CSS:

Div (عرض: 100%؛ تراز متن: مرکز؛ ) div img( وزن: 100%؛ ارتفاع: خودکار؛ )

این کد فقط مجوزهایی را برای طرح تطبیقی ​​تنظیم می کند. به طور خاص، بیان می کند که عرض (وزن) همیشه باید 100٪ عرض ناحیه مشتری مرورگر وب باشد، در حالی که ارتفاع (ارتفاع) به طور خودکار تنظیم می شود.

بررسی طرح تطبیقی

ابزارهای ویژه ای برای بررسی طرح تطبیقی ​​وجود دارد. به عنوان مثال، در مرورگر GoogleChrome می توانید کلید "F12" را فشار دهید و سپس در پنلی که باز می شود، روی نمادی که تصویر گوشی هوشمند و تبلت را نشان می دهد کلیک کنید. پس از این عمل، چندین پنل دیگر ظاهر می شود که در آنها باید وضوح مورد نظر را مشخص کنید.

می توان آن را حتی آسان تر کرد. برای بررسی اینکه آیا طراحی ریسپانسیو کار می کند، باید CTRL را نگه دارید و سپس روی "+" یا "-" کلیک کنید. پس از این عمل، صفحه باید متناسب با آن افزایش یا کاهش یابد، اما عنصری که طرح تطبیقی ​​برای آن اعمال می‌شود، نسبت نسبت‌های خود را حفظ می‌کند (یا کار دیگری را انجام می‌دهد، آنچه در قوانین مشخص شده است).

ابزارهایی که طرح‌بندی طراحی واکنش‌گرا را ساده می‌کنند

چیدمان طراحی واکنشگرا یک کار نسبتا وقت گیر است. بنابراین برای کاهش زمان اجرای تمامی این رویه ها، بهتر است از ابزارهای مخصوص استفاده شود. فریمورک معروف Bootstrap* را می توان یکی از آنها نامید.

به عنوان مثال، این جعبه ابزار برای HTML و CSS شامل تعداد زیادی کلاس از پیش تعریف شده است که می توانید هنگام طراحی از آنها استفاده کنید. همچنین شامل موارد پویا است که مطابق با تمام قوانین و استانداردها به شما امکان می دهد عناصر تطبیقی ​​ایجاد کنید.

برای شروع استفاده از آن، ابتدا باید مستقیماً در مورد خود CSS3 و HTML5 دانش کسب کنید و سپس ویژگی های فریمورک را یاد بگیرید. با این حال، با درک بیشتر پیچیدگی های کار با آن، متعاقباً می توانید زمان توسعه طراحی وب سایت تطبیقی ​​را چندین برابر کاهش دهید.

*Bootstrap یک نرم افزار متن باز است که توسط Twitter Inc. این به صورت رایگان توزیع می شود و جامعه گسترده ای دارد که همیشه می توانید از آنها مشاوره بخواهید.