ম্যাজেন্টো 2: স্টাইল-এম.এস.এস বনাম স্টাইল-এল.সি.এস.এস.

10

কীভাবে style-m.cssএবং style-l.cssফাইলগুলি ম্যাজেন্টো 2 এ উত্পন্ন হয়?

তত্ত্বের মধ্যে মোবাইল ডিভাইসগুলিতে দ্রুত লোড হওয়ার style-m.cssচেয়ে কেবল মোবাইল ডিভাইসের জন্য কম কোড থাকতে হবে এবং স্টাইল থাকা উচিত style-l.css।

কোডের কিছু অংশ style-m.cssবা অংশ থাকা উচিত যদি আপনি কীভাবে কম ফাইলে সংজ্ঞা দেন style-l.css?

নিম্নলিখিত লিঙ্কগুলি এবং উত্স কোডটি এটি বুঝতে আমাকে সহায়তা করেনি।

সম্পদ:

magento2 layout css

— আলেকসে রাজ্জাকভ
সূত্র

12

এই ফাইলগুলি কমের মাধ্যমে উত্পন্ন হয়।

তত্ত্ব অনুসারে স্টাইল-এম.এস.এস. এর মোবাইল কোডগুলি কম মোবাইল থাকা উচিত এবং মোবাইল ডিভাইসগুলিতে দ্রুত লোড হওয়ার জন্য স্টাইল-এল সিএসএস-এর চেয়ে কেবল মোবাইল ডিভাইসের জন্য স্টাইল থাকতে হবে।

এটি সম্পূর্ণ সঠিক নয় not styles-m.cssএবং উভয় মোবাইল এবং ডেস্কটপ জন্য CSS নিয়ম রয়েছে এইভাবে সাধারণত চেয়ে বড় styles-l.cssযা ডেস্কটপের জন্য নিয়ম রয়েছে। তবে লক্ষ্যটি এখনও এই একই, এইভাবে, মোবাইল ডিভাইসগুলিকে ডেস্কটপ ডিভাইসের জন্য সিএসএস বিধিগুলি ডাউনলোড করার দরকার নেই।

এই ফাইলগুলির মধ্যে যে কোনও একটিতে স্টাইলগুলি কীভাবে "স্থাপন" করা যেতে পারে সে সম্পর্কে, এটি ম্যাজেন্টো ইউআই লাইব্রেরি মিডিয়া ক্যোয়ারির মাধ্যমে করা হয় যা ম্যাজেন্টোকে আপনার কম নিয়ম থেকে এই দুটি ফাইল তৈরি করতে সহায়তা করে।

আপনাকে একটি উদাহরণ দেওয়ার জন্য, নিম্নলিখিতটির মতো একটি মিডিয়া ব্লক স্থাপন করা হবে styles-mকারণ ডেস্কটপ এবং মোবাইল ডিভাইস উভয়ই এই ব্লকের মধ্যে "সাধারণ" হিসাবে নিয়ম আছে:

& when (@media-common = true) {
  h1 {
    font-size: 12px;
  } 
}

এর মতো একটি মিডিয়া ক্যোয়ারী ব্লক এমন ডিভাইসের জন্য হবে যার "স্ক্রিন_এক্সস" এর ন্যূনতম রেজোলিউশন রয়েছে, যা 480px এবং এর বড় স্ক্রিন রেজোলিউশন সহ মোবাইল ডিভাইস, যার অর্থ এটি এখনও রাখা styles-mহবে তবে অগত্যা সমস্ত মোবাইল ডিভাইসগুলিকে প্রভাবিত করবে না:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xs) {
  h1 {
    font-size: 18px;
  }  
}

পরিবর্তন (@extremum = 'min')করার জন্য (@extremum = 'max')তার বিপরীত নিয়ম পরিবর্তন হবে এবং এর ফলে শুধুমাত্র একটি প্রস্থ 480px চেয়ে ছোট ডিভাইসে প্রভাবিত।

এবং এর মতো একটি ব্লক কেবলমাত্র ডেস্কটপ ডিভাইসগুলির জন্য উদ্বেগযুক্ত এবং সুতরাং এটি স্থাপন করা হবে styles-l, কারণ 'উপরে' screen__mসমস্ত কিছু ডেস্কটপ ডিভাইস হিসাবে বিবেচিত হয় (ডিফল্টরূপে):

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  h1 {
    font-size: 24px;
  }  
}

আপনি এই ব্রেক পয়েন্টগুলি সম্পর্কে Magento বিকাশকারী গাইডটিতে আরও পড়তে পারেন ।

— TiEul
সূত্র

এর অর্থ কি আমাদের ওভাররাইড করার অনুমতি নেই styles-l.cssএবং styles-m.cssআমাদের থিমটিতে?

— কালো

4

মতে default_head_blocks.xmlফাঁকা থিম লেআউট:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
    </head>
</page>

আমি যা বুঝি styles-l.cssসেগুলি থেকে কেবল বড় পর্দার জন্য প্রয়োগ করা হয় (768px এর উপরে) এবং styles-m.cssসর্বদা প্রয়োগ করা হয়।

সুতরাং styles-m.cssএটির কারণেই আরও কোড রয়েছে কারণ এতে মোবাইল কোড রয়েছে এবং সেই সাথে কোডটি যা স্ক্রিনের প্রস্থই যাই হোক না কেন প্রয়োগ করে। styles-l.cssকেবলমাত্র বৃহত্তর পর্দার জন্য কোড রয়েছে।

— ডিজিটাল পিয়ানিজমে রাফেল
সূত্র

1

"স্টাইলস-এম.এস.এস.এস এর আরও কোড রয়েছে কারণ" আপনি যদি মোবাইল-ফার্স্ট পদ্ধতির ব্যবহার করেন তবে এটি সত্য নয়

— আলেক্সে রাজ্জাকভ

2

আপনি এটি আপনার মিডিয়া ক্যোয়ারী ফাংশন এবং কম গার্ড কার্যক্রমে সংজ্ঞা দিন ine উদাহরণস্বরূপ & when (@media-common = true) { ... }স্টাইলস-এম.এস.এসএস এ যান কারণ এই স্টাইলগুলি সর্বত্র পাওয়া উচিত।

মিডিয়া ক্যোয়ারী সম্পর্কে বলতে গিয়ে, এটি ডেস্কটপ ফাইলে যায়:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {}

শৈলীগুলি এখানে কীভাবে মোকাবেলা করতে হয় সে সম্পর্কে আপনি আমার স্লাইডগুলি চেক করতে চাইতে পারেন:
https://slidr.io/toh82/how-to-deal-with-styles-in-magento-2#1

— টোবিয়াস হার্টম্যান
সূত্র