Я використовую 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>
Ось селектори, що використовуються в 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.
<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>
На основі відповіді 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) {
}
min-width
ви, але ви max-width
також використовували , тож в чому різниця?
Якщо ви використовуєте LESS або SCSS / SASS, а ви використовуєте LESS / SCSS версію Bootstrap, ви можете також використовувати змінні , якщо у вас є доступ до них. Менший переклад відповіді @ 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)
.
EDIT: Якщо ви використовуєте SCSS / SASS, змінні починаються з $
замість @
, так що було б і $screen-xs-max
т.д.
$screen-xs-max
і т.д. з Bootstrap, вам зовсім не пощастило.)
@screen-tablet
, @screen-desktop
і @screen-lg-desktop
були застарілими. Можливо, час для оновлення вашої вже приголомшливої відповіді. ;-)
Це значення з 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){}
and
умови. @JasonMiller, тому це не зовсім "обов'язково", це залежить від специфікацій та вимог шаблону.
Ось два приклади.
Коли вікно перегляду стане шириною 700 пікселів або менше, зробіть усі теги h1 20 пікселями.
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}
Зробіть усі 20-х пікселів h1, поки вікно перегляду не досягне 700 пікселів або більше.
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}
Сподіваюся, це допомагає: 0)
font-size: 20px
для h1
тегів в обох випадках. Для кращого розуміння ви можете скористатися різними font-size
запитаннями. До речі, це все добре.
Ось більш модульний приклад використання 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;
});
}
@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
@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}
}
Також пам’ятайте, що в області завантаження 3 було випущено 480 вікон перегляду.
Наступні медіа-запити ми використовуємо в наших файлах Менше, щоб створити ключові точки перерви в нашій системі сітки.
/* 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.less
<link rel="stylesheet/less" type="text/css" href="loader.less" />
Простенька..
Bootstrap в основному використовує такі діапазони запитів медіазаписів - або точки зупинки - у нашому вихідному файлі Sass для нашого макета, системи сітки та компонентів.
Невеликі пристрої (портретні телефони, менше 576 пікселів) Немає медіа-запиту, xs
оскільки це типовий варіант у Bootstrap
Невеликі пристрої (альбомні телефони, 576 пікселів і вище)
@media (min-width: 576px) { ... }
Середні пристрої (планшети, 768 пікселів і вище)
@media (min-width: 768px) { ... }
Великі пристрої (настільні, 992 пікселів і вище)
@media (min-width: 992px) { ... }
Надзвичайно великі пристрої (великі настільні комп'ютери, 1200 пікселів і вище)
@media (min-width: 1200px) { ... }
Оскільки ми пишемо наш вихідний CSS в Sass, всі наші запити в медіа доступні через Sass mixins:
Немає медіа-запиту, необхідного для точки розриву 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) { ... }
Щоб зрозуміти це глибоко, будь ласка, перейдіть за посиланням нижче
Екран лише @media і (максимальна ширина: 1200 пікселів) {}
Екран лише @media і (максимальна ширина: 979 пікселів) {}
Екран лише @media і (максимальна ширина: 767 пікселів) {}
Екран лише @media та (максимальна ширина: 480 пікселів) {}
Екран лише @media та (максимальна ширина: 320 пікселів) {}
@media (мінімальна ширина: 768px) та (max-width: 991px) {}
@media (мінімальна ширина: 992px) та (max-width: 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) {
}
:)
В останній завантажувальній програмі (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;
}
}
Документація:
Щасливе кодування;)
Щоб покращити основну відповідь:
Ви можете використовувати медіа- атрибут <link>
тегу (він підтримує медіа-запити), щоб завантажити лише той код, який потрібен користувачеві.
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">
З цим браузер завантажить усі ресурси CSS, незалежно від атрибута медіа . Різниця полягає в тому, що якщо медіа-запит медіа-атрибута оцінюється як помилковий, то цей файл .css і його вміст не буде блокуватися візуалізацією.
Тому рекомендується використовувати атрибут media в <link>
тезі, оскільки це гарантує кращу роботу користувачів.
Тут ви можете прочитати статтю Google про цю проблему https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
Деякі інструменти, які допоможуть вам автоматизувати розділення коду css у різних файлах відповідно до ваших медіа-запитів
Вебпак 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