নিবন্ধ ডিরেক্টরি
কিভাবে মোবাইল প্রতিক্রিয়াশীল CSS বিভিন্ন রেজোলিউশন অনুযায়ী বিভিন্ন @media স্ক্রীন প্রতিক্রিয়াশীল লেআউট প্রদর্শন করে?
নিম্নলিখিত নিবন্ধটি বিভিন্ন রেজোলিউশন নির্ধারণ করতে এবং অভিযোজিত প্রস্থ অর্জনের জন্য বিভিন্ন প্রস্থের বিন্যাস প্রদর্শন করতে কীভাবে CSS ব্যবহার করতে হয় তা উপস্থাপন করবে।
প্রয়োজনে বন্ধুরা এটি উল্লেখ করতে পারেন, আমি আশা করি এটি সবার জন্য সহায়ক হবে।
@media এবং @media স্ক্রিন প্রিন্টিং ওয়েব পৃষ্ঠাগুলির মধ্যে পার্থক্য
- যদি CSS একটি প্রিন্টিং ডিভাইসে ব্যবহার করার প্রয়োজন হয়, তাহলে @media ব্যবহার করুন, অন্যথায়, @media স্ক্রীন ব্যবহার করুন।
- যাইহোক, এটি অগত্যা সত্য নয়৷ আসলে, আপনি যদি "স্ক্রিন" এর পরিবর্তে "প্রিন্ট" দিয়ে এটিকে @মিডিয়া প্রিন্ট হিসাবে লেখেন, তাহলে মুদ্রণ ডিভাইসে CSS ব্যবহার করা যেতে পারে;
- কিন্তু মনে রাখবেন যে @media প্রিন্ট দ্বারা ঘোষিত CSS শুধুমাত্র প্রিন্টিং ডিভাইসে বৈধ।
1. DIVCSS ছোট কেস বিবরণ
আমরা প্রথমে ".abc" নামে একটি DIV বক্স CSS সেট করি, এর উচ্চতা 300px এ সেট করি এবং CSS বর্ডারটিকে কালোতে সেট করি;
- এবং সেটিংস
margin:0 autoবিন্যাস কেন্দ্রীভূত, এবং এই দুটি শৈলী সহজে দেখার জন্য প্রাক-সেট করা হয়েছে।
আমরা প্রস্থ প্রদর্শন করতে ব্রাউজারটিকে ম্যানুয়ালি টেনে আনি, এবং তারপরে বাক্সের প্রস্থ কীভাবে পরিবর্তিত হয় তা পর্যবেক্ষণ করি:
- যখন ব্রাউজারের প্রস্থ 500px এর বেশি নয় এমন একটি প্রস্থের সাথে সামঞ্জস্য করা হয়, তখন বাক্সের প্রস্থের সাথে 100px প্রদর্শিত হয়;
- যখন ব্রাউজারের প্রস্থ 901px-এর কম হওয়ার জন্য সামঞ্জস্য করা হয়, তখন ".abc" বাক্সের প্রস্থের সাথে সঙ্গতিপূর্ণ প্রদর্শিত হয়, যা 200px প্রদর্শন করে;
- যখন ব্রাউজারের প্রস্থ 1201px এর বেশি হতে সমন্বয় করা হয়, তখন বক্স অবজেক্টের প্রস্থ 1200px প্রদর্শন করে;
- যখন এটি 1200px এর কম হয়, তখন প্রদর্শনের প্রস্থ 900px হয়।
2, CSS মোবাইল ফোন মোবাইল টার্মিনাল অভিযোজিত কোড
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- এটা লক্ষ করা উচিত যে CSS কোড অর্ডার হল বড় থেকে ছোট CSS টাইপসেটিং (বিচার করা যে ব্রাউজারের প্রস্থ যত বড়, সামনের অংশ তত বেশি)।
- এটি যৌক্তিক সম্পর্কের কারণে, @মিডিয়ার সিএসএস ডিবাগিংয়ের রায়ের ফলে রায় ব্যর্থ হবে।
3. HTML কোড
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>দ্রষ্টব্য: ডিভাইস-আদর্শ-অনুপাত
- ডিভাইস-আসপেক্ট-অনুপাত নির্দিষ্ট স্ক্রিন আকৃতির অনুপাতের সাথে ডিভাইসগুলিকে ফিট করতে ব্যবহার করা যেতে পারে, এটি একটি দরকারী সম্পত্তি।
- উদাহরণস্বরূপ, আমাদের পৃষ্ঠাটি 4:3 এর অনুপাত সহ সাধারণ পর্দার জন্য একটি শৈলী সংজ্ঞায়িত করতে চায়।
- তারপর 16:9 এবং 16:10 ওয়াইডস্ক্রীনের জন্য, অন্য শৈলী সংজ্ঞায়িত করুন, যেমন অভিযোজিত প্রস্থ এবং নির্দিষ্ট প্রস্থ:
- @মিডিয়া শুধুমাত্র স্ক্রীন এবং (ডিভাইস-আসপেক্ট-অনুপাত: 4/3)
4. প্রধান ব্রাউজার HTML+CSS+JS সোর্স কোডের সাথে সামঞ্জস্যপূর্ণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>উপরেরটি হল মোবাইল টার্মিনাল অভিযোজিত CSS, যা বিভিন্ন স্ক্রীন অনুযায়ী বিভিন্ন @media স্ক্রীন প্রতিক্রিয়াশীল বিস্তারিত বিষয়বস্তু প্রদর্শন করে।
হোপ চেন উইলিয়াং ব্লগ ( https://www.chenweiliang.com/ ) শেয়ার করা হয়েছে "মোবাইল অ্যাডাপটিভ CSS ডিফারেন্ট স্ক্রিন ডিসপ্লে ডিফারেন্ট @মিডিয়া স্ক্রিন রেসপন্সিভনেস", যা আপনার জন্য সহায়ক।
এই নিবন্ধটির লিঙ্ক শেয়ার করতে স্বাগতম:https://www.chenweiliang.com/cwl-2074.html
সর্বশেষ আপডেট পেতে চেন ওয়েইলিয়াং এর ব্লগের টেলিগ্রাম চ্যানেলে স্বাগতম!
📚 এই গাইডটিতে বিশাল মূল্য রয়েছে, 🌟এটি একটি বিরল সুযোগ, এটি মিস করবেন না! ⏰⌛💨
ভালো লাগলে শেয়ার এবং লাইক করুন!
আপনার শেয়ার এবং লাইক আমাদের ক্রমাগত অনুপ্রেরণা!