CSS پاسخگوی تلفن همراه چگونه طرح‌بندی‌های مختلف واکنش‌گرای صفحه @media را با توجه به وضوح‌های مختلف نمایش می‌دهد؟
مقاله زیر نحوه استفاده از CSS برای تعیین رزولوشن های مختلف و نمایش طرح بندی عرض های مختلف برای دستیابی به عرض تطبیقی را معرفی می کند.
دوستان نیازمند مراجعه کنند امیدوارم برای همه مفید باشد.
تفاوت بین @media و @media صفحات وب چاپ صفحه نمایش
- اگر css باید در دستگاه چاپ استفاده شود، از @media استفاده کنید، در غیر این صورت، از صفحه رسانه @ استفاده کنید.
- با این حال، این لزوما درست نیست. در واقع، اگر "صفحه نمایش" را با "print" جایگزین کنید و آن را به عنوان @media print بنویسید، آنگاه می توان از CSS در دستگاه چاپ استفاده کرد.
- اما توجه داشته باشید که css اعلام شده توسط @media print فقط در دستگاه های چاپ معتبر است.
1. توضیحات مورد کوچک DIVCSS
ابتدا یک CSS باکس DIV با نام ".abc" تنظیم کردیم، ارتفاع آن را روی 300px قرار دادیم و مرز 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>توجه: نسبت ابعاد دستگاه
- device-aspect-ratio را می توان برای تطبیق دستگاه هایی با نسبت های صفحه نمایش خاص استفاده کرد که این نیز یک ویژگی مفید است.
- به عنوان مثال، صفحه ما می خواهد یک سبک برای صفحه نمایش های معمولی با نسبت تصویر 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
به کانال تلگرام وبلاگ چن ویلیانگ خوش آمدید تا از آخرین به روز رسانی ها مطلع شوید!
📚 این راهنما حاوی ارزش بسیار زیادی است، 🌟این یک فرصت نادر است، آن را از دست ندهید! ⏰⌛💨
اگر دوست داشتید به اشتراک بگذارید و لایک کنید
اشتراک گذاری و لایک های شما انگیزه مستمر ما هستند!