[Css3] Twitter Bootstrap 3: كيفية استخدام استعلامات الوسائط؟


Answers

استنادًا إلى إجابة bisio ورمز Bootstrap 3 ، تمكنت من الحصول على إجابة أكثر دقة لأي شخص يبحث فقط عن نسخ ولصق الاستعلام الكامل عن الوسائط الذي تم تعيينه في ورقة الأنماط:

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Portrait phones and smaller */
@media (max-width: 480px) {

}
Question

أستخدم Bootstrap 3 لإنشاء تخطيط سريع الاستجابة حيث أريد ضبط بعض أحجام الخطوط وفقًا لحجم الشاشة. كيف يمكنني استخدام استعلامات الوسائط لجعل هذا النوع من المنطق؟




media screen only و (max-width: 1200px) {}

media screen only و (max-width: 979px) {}

media screen only و (max-width: 767px) {}

media screen only و (max-width: 480px) {}

media screen only و (max-width: 320px) {}

media (min-width: 768px) و (max-width: 991px) {}

media (min-width: 992px) و (max-width: 1024px) {}




في ما يلي مثال نموذجي أكثر باستخدام LESS لمحاكاة Bootstrap دون استيراد الملفات الأقل.

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs only
@media(max-width: @screen-xs-max) {

}
//small and up
@media(min-width: @screen-sm-min) {

}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md and up
@media(min-width: @screen-md-min) {

}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg and up
@media(min-width: @screen-lg-min) {

}



استنادًا إلى إجابات المستخدمين الآخرين ، كتبت هذه المزيجات المخصصة لتسهيل الاستخدام:

مدخلات أقل

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

استخدام المثال

body {
  .when-lg({
    background-color: red;
  });
}

إدخال SCSS

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

استخدام المثال:

body {
  @include when-md {
    background-color: red;
  }
}

انتاج |

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}



ضع في اعتبارك أن تجنب قياس النص هو السبب الرئيسي لوجود تخطيطات استجابة. والمنطق الكامل وراء المواقع المتجاوبة هو إنشاء تخطيطات وظيفية تعرض المحتوى الخاص بك بفاعلية بحيث يسهل قراءته واستخدامه على أحجام شاشات متعددة.

على الرغم من أنه من الضروري تحديد نطاق النص في بعض الحالات ، يجب الحرص على عدم تصغير موقعك وتجاوزه.

هنا مثال على ذلك.

@media(min-width:1200px){

    h1 {font-size:34px}

}
@media(min-width:992px){

    h1 {font-size:32px}

}
@media(min-width:768px){

    h1 {font-size:28px}

}
@media(max-width:767px){

    h1 {font-size:26px}

}

ضع في اعتبارك أيضًا أن منفذ العرض 480 قد تم إسقاطه في bootstrap 3.




يمكنك أن ترى في أحجام نماذج أحجامي وألوان الخلفية تتغير حسب حجم الشاشة

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}
/* Custom, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>




هذه هي القيم من Bootstrap3:

/* Extra Small */
@media(max-width:767px){}

/* Small */
@media(min-width:768px) and (max-width:991px){}

/* Medium */
@media(min-width:992px) and (max-width:1199px){}

/* Large */
@media(min-width:1200px){}