چگونه طراحی ریسپانسیو را به صورت رایگان تست کنیم. طرح بندی پاسخگو با استفاده از تست اسکریپت جاوا اسکریپت طراحی پاسخگو

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

و می خواهم بگویم که خواندن سایت های دارای آن در چنین دستگاه هایی بسیار راحت تر از بدون آن است.

امروز می خواهم 5 سرویس بسیار مفید و جالب را به شما معرفی کنم که با آنها می توانید وب سایت خود را از نظر سازگاری بررسی کنید.

و بنابراین، بیایید برویم.

5 سرویس که می توانید وب سایت خود را از نظر سازگاری بررسی کنید. www.responsivedesigntest.net

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

mattkersley.com

یک سرویس ساده برای بررسی یک وب سایت از Matt Kersley. همه رزولوشن های محبوب دستگاه تلفن همراه نیز در دسترس هستند.

screenqueri.es

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

quirtools.com

سرویس بسیار زیبا و کاربردی. حتی می توان بررسی کرد که سایت در تلویزیون چگونه به نظر می رسد :-)

از نویسنده: "تغییر اندازه این مرورگر را متوقف کنید، به زودی پاک خواهد شد!" چند بار این را می شنوید؟ خوب، بسیار خوب، شاید نه آنقدرها، اما اگر وب‌سایت‌های ریسپانسیو ایجاد می‌کنید، می‌دانید که در مورد چه چیزی صحبت می‌کنم: هر بار که DOM یا CSS را ویرایش می‌کنید، لبه مرورگر را به جلو و عقب می‌کشید و تغییرات را آزمایش می‌کنید. و به دنبال نادرستی است.

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

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

در خانه من دو لپ تاپ مختلف دارم، دو تا متفاوت دستگاه های اندرویدی: Kindle و Nexus 7. من از این دستگاه‌ها برای آزمایش پیشرفت‌های مستقل خود استفاده می‌کنم، اما واضح است که این انتخاب جامعی نیست. اصلا دستگاه های iOS، و در حالی که من به عنوان یکی از کاربران اولیه در نظر گرفته می شوم، قصد ندارم هر گوشی/تبلت/تبلت جدیدی را به محض فروش آن بخرم.

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

برای اهداف آزمایشی، من اولین وب سایت واقعاً واکنش گرا را که ایجاد کردم، PajamasOnYourFeet.com را انتخاب کردم. این بر اساس قالب Brownie HTML5 است که به صورت بسیار سخاوتمندانه و رایگان در EGrappler در اختیار جامعه توسعه دهندگان قرار گرفته است.

آیا من پاسخگو هستم؟

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

رومیزی - 1600 x 992 پیکسل، کاهش بر اساس مقیاس (0.3181)

لپ تاپ - 1280 x 802 پیکسل، در مقیاس کاهش (0.277)

رایانه لوحی - 768 x 1024 پیکسل، کاهش بر اساس مقیاس (0.219)

تلفن همراه - 320 x 480 پیکسل، کاهش بر اساس مقیاس (0.219)

به نقل از توسعه دهنده: "این یک ابزار تست نیست، انجام این کار در دستگاه های واقعی بسیار مهم است. اما این ابزاری برای گرفتن اسکرین شات های سریع (برای من) و ارائه یک فرصت بصری برای "تشخیص" در جلسات مشتری منظور شماست."

دستگاه مثبت

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

مک بوک - 1280 x 800

iPad (پرتره) - 768 x 1024

iPad (منظره) - 1024 x 768

کیندل (پرتره) - 600 x 1024

کیندل (منظره) - 1024 x 600

آیفون (جهت پرتره) - 320 x 480

آیفون (منظره) - 480 x 320

کهکشان (پرتره) - 240 x 320

کهکشان (منظره) - 320 x 240

مانند اکثر ابزارهای مشابه، نوارهای پیمایش در دستگاه های کوچک ظاهر می شوند. آنها در یک دستگاه واقعی نشان داده نمی شوند، اما برای اینکه بتوانید نمای آزمایشی را روی یک دستگاه غیر لمسی پیمایش کنید، باید کمی امتیاز دهید.

تست پاسخگو

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

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

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

پاسخگو است

این بسیار شبیه به دو مورد قبلی است و تنها چیزی که Responsive. را از آنها متمایز می کند، انیمیشن روان نمایشگر از یک دستگاه به دستگاه دیگر و همچنین یک پوشش شفاف است که املاک و مستغلات سایت را نشان می دهد که از نمای دید خارج می شوند. .

تنها گزینه‌های موجود دستگاه در اینجا گزینه‌های خودکار هستند که پنجره مرورگر شما را پر می‌کنند و سایت را همانطور که در صورت مراجعه به آن می‌بینید نشان می‌دهند: Desktop; تبلت (جهت افقی)؛ تبلت (جهت پرتره)؛ تلفن هوشمند (جهت افقی) و تلفن هوشمند (جهت عمودی)، ابعاد پیکسل داده نشده است.

صفحه نمایش

بار دیگر، چندین ویژگی و گزینه مختلف Screenqueries را از سایر سایت ها متمایز می کند. 14 تلفن و 12 دستگاه تبلت با یک عنصر جداگانه برای تغییر حالت های عمودی و افقی وجود دارد. اینها بر روی یک شبکه پیکسل شماره گذاری شده با ابعاد نشان داده شده در پایین سمت راست نمایشگر آزمایشی نمایش داده می شوند. لبه های نمایشگر قابل کشیدن هستند تا بتوانید اندازه های سفارشی را آزمایش کنید. روی ناحیه آزمایش بکشید یا کلیک کنید و پس‌زمینه خاکستری می‌شود و ظاهری کمتر به هم ریخته دارد.

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

Screenfly

Screenfly واقعا ضریب قابلیت استفاده را افزایش می دهد. نه دستگاه بزرگتر از تبلت ها، از یک لپ تاپ 10 اینچی تا یک دسکتاپ 24 اینچی، پنج تبلت، نه گوشی هوشمند، سه اندازه تلویزیون و یک گزینه اندازه صفحه نمایش سفارشی را ارائه می دهد. هر گزینه ای را که انتخاب می کنید می توانید با استفاده از یک کنترل جداگانه در منو در جهت عمودی یا افقی بچرخانید. می‌توانید انتخاب کنید که پیمایش مجاز باشد یا نه و با یک کلیک یک دکمه پیوند قابل اشتراک‌گذاری ایجاد کنید.

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

همه موارد فوق قبلاً آن را به یک ابزار ایده‌آل تبدیل می‌کردند، اما توسعه‌دهندگان Screenfly فرصتی پیدا کردند تا آن را به سادگی در کلاس برتر قرار دهند و یک ویژگی سرور پروکسی ارائه کردند. به نقل از وب‌سایت آنها: «Screenfly ممکن است از یک سرور پروکسی برای جعل هویت دستگاه‌ها استفاده کند، در حالی که شما وب‌سایت آنها را مشاهده می‌کنید. پراکسی رشته عامل کاربر دستگاه هایی را که انتخاب می کنید شبیه سازی می کند، اما رفتار آن دستگاه ها را شبیه سازی نمی کند." تمام ابزارهای دیگری که در اینجا پوشش داده می شوند منحصراً با CSS سروکار دارند. Screenfly تنها موردی است که اجازه آزمایش بر اساس رشته عامل کاربر را می دهد.

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

نتیجه

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

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

نادیده گرفتن تحلیل رفتار بازدیدکنندگان

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

طراحی فروشگاه رومیزی

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

تست طراحی واکنشگرا

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

کاستی های طراحی تطبیقی ​​به راحتی با آزمایش اولیه یک فروشگاه آنلاین شناسایی می شود، اما بسیاری از فروشندگان منابع لازم برای این کار را ندارند. برای کاهش خطر از دست دادن پول، مسیرهای کاربر کلیدی در اطراف سایت را در مرورگرهای اصلی - Chrome، IE، Firefox، Safari و سیستم های عامل– Windows، Mac OS، Android، IOS در محبوب دستگاه های تلفن همراه. هر بار که تغییراتی ایجاد می کنید آزمایش کنید؛ سرویس هایی مانند BrowserStack یا Viewport Resizer می توانند به کاهش زمان تست به چند ساعت کمک کنند.

عناصر کوچک برای صفحه نمایش تلفن همراه

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

سرعت بارگذاری صفحه پایین است

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

محتوا را در برگه‌های مختلف جدا کنید، برای مثال، یک صفحه محصول ممکن است فقط شامل یک تصویر اصلی، توضیحات، قیمت و دکمه «خرید» باشد. نظرات و ویدیوهای مشتری را می توان در یک برگه جداگانه قرار داد و "وزن" قسمت اصلی صفحه را کاهش داد. علاوه بر محتوا، عناصر دیگری را که بر سرعت بارگذاری تأثیر می‌گذارند بهینه کنید - فایل‌های CSS، تصاویر و اسکریپت‌ها، فقط داده‌های لازم را ارسال کنید. ابزارهایی که حجم فایل های منبع و زمان بارگذاری آنها را کاهش می دهند در این مورد به شما کمک می کنند: Uglify یا JSCompress.

کوتاه کردن محتوا برای کاربران تلفن همراه

اغلب، توسعه دهندگان برخی از محتوا را پنهان می کنند تا بارگذاری در دستگاه های تلفن همراه سریعتر انجام شود. با این حال، اغلب حجم صفحه در واقع کاهش نمی یابد و محتوا به سادگی به کاربر نمایش داده نمی شود. فروشگاه شما باید بتواند به صورت پویا یک صفحه ایجاد کند و وزن صفحه و زمان بارگذاری را برای بازدیدکنندگان موبایل کاهش دهد. علاوه بر این، ارائه محتوای کمتر به کاربران تلفن همراه بد است و بر تجربه مصرف کننده تأثیر منفی می گذارد. به طور معمول، در طول فرآیند خرید آنها استفاده می کنند دستگاه های مختلف، حدود 90 درصد از خریداران آنلاین این کار را انجام می دهند. محدود کردن آنها به روش‌های طراحی واکنش‌گرا یک اشتباه بزرگ است.

پشتیبانی از تصاویر تنها در یک وضوح

یک وب سایت خوب با طراحی ریسپانسیو به طور خودکار وضوح تصاویر را بسته به نوع دستگاه تغییر می دهد؛ تصاویر سنگین زمان بارگذاری را افزایش می دهند. راه های مختلفی برای تنظیم خودکار اندازه تصویر برای تناسب وجود دارد دستگاه خاص. تصاویر "انعطاف پذیر" (تصاویر سیال) یک روش مبتنی بر CSS است که به شما امکان می دهد یک تصویر را بسته به عرض عنصر حاوی آن فشرده و کشیده یا یک عنصر HTML5 که به شما امکان می دهد یک تصویر با اندازه مورد نیاز را برای هر یک بارگذاری کنید. نوع دستگاه

ایمیل های "غیر پاسخگو".

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

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

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

بسیاری از مردم شروع به اشتباه چیدمان تطبیقی ​​با چیدمان انعطاف پذیر می کنند؛ این اشتباه بسیار رایج طراحان چیدمان تازه کار است. شما میپرسید چه فرقی دارد؟

بیایید ابتدا، برای اینکه برای شما واضح باشد و به اصطلاح، تمام نقاط را قرار دهید و ببینید چه نوع چیدمانی وجود دارد.

4 نوع چیدمان وجود دارد:

چیدمان ثابت

طرح لاستیکی

چیدمان تطبیقی

چیدمان پاسخگو

بیایید همه انواع را با جزئیات بیشتری در نظر بگیریم.

1. طرح ثابت

بلوک ها عرض خود را تغییر نمی دهند. در مانیتورهای با وضوح پایین، یک نوار اسکرول افقی ظاهر می شود.

#temnyi، #svetlyi (عرض: 440 پیکسل؛ )

2. طرح لاستیکی

بسته به اندازه پنجره مرورگر، بلوک ها عرض خود را تغییر می دهند. این می تواند مقادیر حداکثر و حداقل را بگیرد (مشخصات حداکثر عرض). اما با کوچکتر شدن صفحه نمایش، نمی توانید 50% را از 50% به 100% برسانید.

#temnyi، #svetlyi (عرض: 50٪؛ )

3. طرح تطبیقی

با استفاده از @media یا اسکریپت پیاده سازی شده است. سفارشی برای دستگاه های خاص شناخته شده (320، 768، 1024، و غیره). هر تغییری پس از رسیدن به یکی از سطوح مشخص شده در تکان‌ها رخ می‌دهد. قطعا مناسب برای

#temnyi, #svetlyi ( عرض: 430 پیکسل؛ ) @media (حداکثر عرض: 1220 پیکسل) ( #temnyi, #svetlyi ( عرض: 380 پیکسل؛ ) ) @media (حداکثر عرض: 1120 پیکسل) ( #temnyi, #svetly : 325 پیکسل؛ ) ) @media (حداکثر عرض: 680 پیکسل) ( #temnyi، #svetlyi (عرض: 200 پیکسل؛ ))

4. طرح پاسخگو

این ترکیبی از چیدمان سیال و تطبیقی ​​است. سخت ترین برای اجرا. اما نتیجه قابل قبول ترین است. به جرات می توان گفت که سایت با هر دستگاهی سازگار است.

#temnyi، #svetlyi ( عرض: 50٪؛ ) @media (حداکثر عرض: 1006 پیکسل) ( #temnyi، #svetlyi ( عرض: 100٪؛ ))

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

اسکریپت چیدمان تطبیقی:

/* بیایید یک متغیر ایجاد کنیم که می توانید کلاس های monogest را برای استفاده راحت از آنها در کد قرار دهید. یعنی اینجا یک بار آنها را تشخیص می دهد و تمام و نه قبل از هر نمونه! این یک ویژگی مفید است */ var my = ( window: $(window) ); /*در واقع خود تابع*/ $(window).resize(function () ( /*متغیری که عرض پنجره را تعیین می کند و آن را در متغیر عرض قرار می دهد*/ var width = my.window.width( )؛ /*شرط تبدیل پنجره، یعنی شرطی که زمانی اجرا می شود که عرض پنجره به اندازه معینی برسد */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });

همین. اگر سوالی دارید، در نظرات بنویسید، به