ฉันใช้ Bootstrap 3 เพื่อสร้างเค้าโครงตอบสนองที่ฉันต้องการปรับขนาดตัวอักษรไม่กี่ตามขนาดหน้าจอ ฉันจะใช้คิวรีสื่อเพื่อสร้างตรรกะชนิดนี้ได้อย่างไร

Bootstrap 3

นี่คือตัวเลือกที่ใช้ใน BS3 หากคุณต้องการให้สอดคล้องกัน:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

หมายเหตุ: FYI สิ่งนี้อาจมีประโยชน์สำหรับการดีบัก:

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

Bootstrap 4

นี่คือตัวเลือกที่ใช้ใน BS4 ไม่มีการตั้งค่า "ต่ำสุด" ใน BS4 เพราะ "พิเศษเล็ก" เป็นค่าเริ่มต้น คือคุณจะต้องเขียนรหัสขนาด XS ก่อนแล้วจึงให้สื่อบันทึกเหล่านี้แทนที่หลังจากนั้น

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

อัปเดต 2019-02-11: ข้อมูล BS3 ยังคงมีความถูกต้องเหมือนเวอร์ชัน 3.4.0, อัปเดต BS4 สำหรับกริดใหม่, ความแม่นยำเท่ากับ 4.3.0

จากคำตอบของ 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) {

}

หากคุณกำลังใช้ LESS หรือ SCSS / SASS และคุณกำลังใช้ Bootstrap รุ่น LESS / SCSS คุณสามารถใช้ตัวแปรได้เช่นกันหากคุณสามารถเข้าถึงได้ การแปลที่น้อยกว่าของคำตอบ @ full-decent จะเป็นดังนี้:

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){}  /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){}  /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){}  /* deprecated: @screen-lg-desktop, or @screen-lg */

นอกจากนี้ยังมีตัวแปรสำหรับ@screen-sm-maxและ@screen-md-maxซึ่งมี 1 พิกเซลน้อยกว่า@screen-md-minและ@screen-lg-min@media(max-width)ตามลำดับโดยทั่วไปสำหรับใช้กับ

แก้ไข: หากคุณใช้ SCSS / SASS ตัวแปรจะเริ่มต้นด้วย$แทนที่จะเป็น a @ดังนั้นมันจะเป็นเช่นนั้น$screen-xs-maxเป็นต้น

นี่คือค่าจาก 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){}

นี่คือสองตัวอย่าง

เมื่อวิวพอร์ตกลายเป็นความกว้าง 700px หรือน้อยกว่าให้สร้างแท็ก h1 ทั้งหมด 20px

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

ทำให้ 20px ของ h1 ทั้งหมดจนวิวพอร์ตถึง 700px หรือใหญ่กว่า

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

หวังว่านี่จะช่วยได้: 0)

นี่คือตัวอย่างแบบแยกส่วนเพิ่มเติมโดยใช้ 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;
  }
}

ในฐานะของ Bootstrap v3.3.6 เคียวรีสื่อบันทึกต่อไปนี้ถูกใช้ซึ่งสอดคล้องกับเอกสารที่แสดงคลาสการตอบสนองที่พร้อมใช้งาน ( http://getbootstrap.com/css/#responsive-utilities )

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

เคียวรีสื่อที่แยกจากที่เก็บ Bootstrap GitHub จากไฟล์ที่น้อยกว่าต่อไปนี้: -

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less

หรือ Sass-Compass ง่าย ๆ :

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

ตัวอย่าง:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}

โปรดทราบว่าการหลีกเลี่ยงการปรับขนาดข้อความเป็นเลย์เอาต์ที่ตอบสนองต่อเหตุผลหลักที่มีอยู่ ตรรกะทั้งหมดที่อยู่เบื้องหลังไซต์ตอบสนองคือการสร้างเลย์เอาต์ที่ใช้งานได้ซึ่งแสดงเนื้อหาของคุณได้อย่างมีประสิทธิภาพดังนั้นจึงสามารถอ่านและใช้งานได้ง่ายบนหน้าจอหลายขนาด

แม้ว่าจะมีความจำเป็นที่จะต้องขยายขนาดข้อความในบางกรณีระวังอย่าย่อขนาดไซต์ของคุณและพลาดจุด

นี่เป็นตัวอย่างอยู่แล้ว

@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

เราใช้เคียวรีสื่อบันทึกต่อไปนี้ในไฟล์ Less เพื่อสร้างเบรกพอยต์สำคัญในระบบกริดของเรา

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ดูเพิ่มเติมที่Bootstrap

คุณสามารถดูตัวอย่างขนาดตัวอักษรและสีพื้นหลังของฉันที่เปลี่ยนแปลงตามขนาดหน้าจอ

<!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>

นี่เป็นโซลูชันครบวงจรที่ง่ายยิ่งขึ้นซึ่งรวมถึงไฟล์ตอบสนองแยกต่างหากตามการสืบค้นสื่อ

สิ่งนี้อนุญาตให้ตรรกะเคียวรีสื่อบันทึกทั้งหมดและรวมตรรกะต้องมีอยู่บนเพจเดียวเท่านั้นโหลดเดอร์ นอกจากนี้ยังช่วยให้ไม่มีการสอบถามสื่อถ่วงสไตล์การตอบสนองตัวเอง

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

base.less จะมีลักษณะเช่นนี้

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

sm-min.less จะมีลักษณะเช่นนี้

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

ดัชนีของคุณเพิ่งโหลด loader

<link rel="stylesheet/less" type="text/css" href="loader.less" />

peasy ง่าย ..

Bootstrap ส่วนใหญ่ใช้ช่วงแบบสอบถามสื่อต่อไปนี้ - หรือจุดพัก - ในไฟล์ Sass ต้นทางของเราสำหรับโครงร่างระบบกริดและส่วนประกอบ

อุปกรณ์ขนาดเล็กพิเศษ (โทรศัพท์แนวตั้ง, น้อยกว่า 576px) ไม่มีการสืบค้นสื่อxsเนื่องจากนี่เป็นค่าเริ่มต้นใน Bootstrap

อุปกรณ์ขนาดเล็ก (โทรศัพท์แนวนอน 576px ขึ้นไป)

@media (min-width: 576px) { ... }

อุปกรณ์ขนาดกลาง (แท็บเล็ต 768px ขึ้นไป)

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

อุปกรณ์ขนาดใหญ่ (เดสก์ท็อป 992px ขึ้นไป)

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

อุปกรณ์ขนาดใหญ่พิเศษ (เดสก์ท็อปขนาดใหญ่ 1200px ขึ้นไป)

@media (min-width: 1200px) { ... }

เนื่องจากเราเขียน CSS แหล่งที่มาของเราใน Sass การสืบค้นสื่อของเราทั้งหมดจะพร้อมใช้งานผ่านทาง MASS มิกซ์

ไม่มีการสืบค้นสื่อที่จำเป็นสำหรับเบรกพอยต์ xs เนื่องจากมีประสิทธิภาพ @media (min-width: 0) { ... }

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

เพื่อทำความเข้าใจอย่างลึกซึ้งโปรดไปที่ลิงค์ด้านล่าง

https://getbootstrap.com/docs/4.3/layout/overview/

@media เฉพาะหน้าจอและ (ความกว้างสูงสุด: 1200px) {}

@media เฉพาะหน้าจอและ (ความกว้างสูงสุด: 979px) {}

@media เฉพาะหน้าจอและ (ความกว้างสูงสุด: 767px) {}

@media เฉพาะหน้าจอและ (ความกว้างสูงสุด: 480px) {}

@media เฉพาะหน้าจอและ (ความกว้างสูงสุด: 320px) {}

@media (ความกว้างต่ำสุด: 768px) และ (ความกว้างสูงสุด: 991px) {}

@media (ความกว้างต่ำสุด: 992px) และ (ความกว้างสูงสุด: 1024px) {}

ใช้คำสั่งสื่อสำหรับ IE;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

:)

ใน bootstrap ล่าสุด (4.3.1) โดยใช้ SCSS (SASS) คุณสามารถใช้หนึ่งใน @mixin ได้ /bootstrap/scss/mixins/_breakpoints.scss

สื่ออย่างน้อยความกว้างเบรกพอยต์ต่ำสุด ไม่มีการค้นหาจุดพักที่เล็กที่สุด ทำให้ @content นำไปใช้กับเบรกพอยต์ที่กำหนดและกว้างขึ้น

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

สื่อที่มีความกว้างเบรกพอยต์สูงสุด ไม่มีการค้นหาจุดพักที่ใหญ่ที่สุด ทำให้ @content นำไปใช้กับเบรกพอยต์และแคบ

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

สื่อที่ครอบคลุมความกว้างจุดพักหลายรายการ ทำให้ @content ใช้ระหว่างจุดพักขั้นต่ำและสูงสุด

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

สื่อระหว่างจุดต่ำสุดและความกว้างสูงสุดของจุดพัก ไม่มีขั้นต่ำสำหรับเบรกพอยต์ที่เล็กที่สุดและไม่สูงสุดสำหรับเบรกพอยต์ที่ใหญ่ที่สุด ทำให้ @content นำไปใช้กับเบรกพอยต์ที่กำหนดเท่านั้นไม่ใช่ดูพอร์ตที่กว้างขึ้นหรือแคบลง

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

ตัวอย่างเช่น:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

เอกสารอ้างอิง:

• intro https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• การโยกย้ายhttps://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• ตัวแปรhttps://getbootstrap.com/docs/4.3/layout/grid/#variables

Happy coding;)

เพื่อปรับปรุงการตอบสนองหลัก:

คุณสามารถใช้คุณสมบัติสื่อของ<link>แท็ก (รองรับการสืบค้นสื่อ) เพื่อดาวน์โหลดเฉพาะรหัสที่ผู้ใช้ต้องการ

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

ด้วยสิ่งนี้เบราว์เซอร์จะดาวน์โหลดทรัพยากร CSS ทั้งหมดโดยไม่คำนึงถึงคุณลักษณะ ของสื่อ ความแตกต่างคือถ้าเคียวรีสื่อบันทึกของแอ็ตทริบิวต์สื่อถูกประเมินเป็น falseไฟล์นั้น. css และเนื้อหาของเขาจะไม่ถูกบล็อกการแสดงผล

ดังนั้นจึงขอแนะนำให้ใช้แอตทริบิวต์สื่อใน<link>แท็กเนื่องจากรับประกันประสบการณ์การใช้งานที่ดีขึ้น

คุณสามารถอ่านบทความของ Google เกี่ยวกับปัญหานี้ได้ที่นี่ https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

เครื่องมือบางอย่างที่จะช่วยให้คุณแยกรหัส css ของคุณโดยอัตโนมัติในไฟล์ต่าง ๆ ตามการสืบค้นมีเดียของคุณ

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query