كيف تعرض CSS المستجيبة للأجهزة المحمولة تخطيطات مستجيبة مختلفة لشاشةmedia وفقًا لدرجات دقة مختلفة؟
ستقدم المقالة التالية كيفية استخدام CSS لتحديد درجات دقة مختلفة وعرض تخطيطات عرض مختلفة لتحقيق عرض قابل للتكيف.
يمكن للأصدقاء المحتاجين الرجوع إليه ، وآمل أن يكون مفيدًا للجميع.
الفرق بينmedia وmedia على صفحات الويب الخاصة بطباعة الشاشة
- إذا كان يلزم استخدام css في جهاز طباعة ، فاستخدمmedia ، وإلا فاستخدمmedia screen.
- ومع ذلك ، هذا ليس صحيحًا بالضرورة ، في الواقع ، إذا استبدلت "screen" بكلمة "print" وكتبتها كـmedia print ، فيمكن استخدام CSS على جهاز الطباعة ؛
- لكن لاحظ أن ملف css المعلن بواسطةmedia print صالح فقط على أجهزة الطباعة.
1. وصف حالة صغيرة DIVCSS
قمنا أولاً بتعيين مربع DIV CSS باسم ".abc" ، وضبطنا ارتفاعه على 300 بكسل ، وضبطنا حدود CSS على الأسود ؛
- والإعدادات
margin:0 autoيتم توسيط التصميم ، وقد تم إعداد هذين الأسلوبين مسبقًا لسهولة المشاهدة.
نسحب المتصفح يدويًا لعرض العرض ، ثم نلاحظ كيف يتغير عرض المربع:
- عندما يتم ضبط عرض المتصفح على عرض لا يزيد عن 500 بكسل ، يتم عرض 100 بكسل بما يتوافق مع عرض المربع ؛
- عندما يتم ضبط عرض المتصفح ليكون أقل من 901 بكسل ، يتم عرض ".abc" المطابق لعرض المربع الذي يعرض 200 بكسل ؛
- عندما يتم تعديل عرض المتصفح ليكون أكبر من 1201 بكسل ، يتم عرض عرض كائن المربع بمقدار 1200 بكسل ؛
- عندما تكون أقل من 1200 بكسل ، يكون عرض الشاشة 900 بكسل.
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 من كبير إلى صغير (بالنظر إلى أنه كلما كان عرض المتصفح أكبر ، كان الجزء الأمامي أعلى).
- هذا بسبب العلاقة المنطقية ، فإن حكم @ media على تصحيح أخطاء 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 ، حدد نمطًا آخر ، مثل العرض التكيفي والعرض الثابت:
- شاشةmedia فقط و (نسبة أبعاد الجهاز: 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 وفقًا لشاشات مختلفة.
مدونة Hope Chen Weiliang ( https://www.chenweiliang.com/ ) تمت مشاركة "شاشات CSS المختلفة المتكيفة للجوال تعرض استجابة شاشةmedia مختلفة" ، وهو أمر مفيد لك.
مرحبا بكم في مشاركة رابط هذه المقالة:https://www.chenweiliang.com/cwl-2074.html
مرحبًا بك في قناة Telegram الخاصة بمدونة Chen Weiliang للحصول على آخر التحديثات!
📚 يحتوي هذا الدليل على قيمة كبيرة، 🌟هذه فرصة نادرة، لا تفوتها! ⏰⌛💨
شارك و اعجبك اذا اردت
مشاركتك وإعجاباتك هي دافعنا المستمر!