Bootstrap отзывчивый типографии для настольных и мобильных - PullRequest
Новая
       18

Bootstrap отзывчивый типографии для настольных и мобильных

0 голосов
/ 12 ноября 2018

Я пытаюсь настроить параметры шрифта Bootstrap 4 так, чтобы мое веб-приложение хорошо выглядело на мобильных устройствах, таких как телефоны или планшеты, и настольных системах, таких как любой Linux, Mac, Windows с установленным Chrome или Firefox. Теперь, везде, где я читаю об отзывчивой типографии, в руководствах рассказывается о простом процессе , но мне, честно говоря, довольно трудно заставить его выглядеть так, как мне нужно, поскольку я все еще довольно новичок в SASS и Bootstrap 4.

Я скопировал настройки из Bootstrap 4 документа , и это результат в основном файле SASS (style / app.global.scss) моего веб-приложения: 

@import "~bootstrap/scss/bootstrap";

@include media-breakpoint-down(md) {
    html {
        font-size: 3rem;
    }
}

Размер шрифта по умолчанию для Bootstrap 4 составляет 16 пикселей на элементе <html>, что нормально. На моем телефоне (Samsung Galaxy s8) 16px едва читаем из-за плотных пикселей на квадратный дюйм. Так что я поднял его на 3rem. До этого момента поведение соответствует ожидаемому.

Но есть нежелательный побочный эффект: если я уменьшу окно браузера Chrome на MacBook Pro до меньшей ширины, чем 992px, размер мобильного устройства 3rem уйдет, и у меня будут огромные буквы.

Однако я бы хотел добиться того, чтобы на рабочем столе всегда был один и тот же размер шрифта 16px и чтобы при переходе окна браузера к меньшему размер шрифта не переходил на больший.

Есть ли способ отличить мобильные и настольные устройства в целом? Документы Bootstrap 4 отлично смотрятся на мобильных и настольных компьютерах, и если я уменьшу окно браузера Chrome до меньшей ширины, буквы все равно останутся в том же размере. Для этого в SASS есть специальная команда?

index.html: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

И index.tsx: 

import "bootstrap";
import "./style/app.global.scss";
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Site } from "./components/Site";
import { Title } from "./components/Title";

ReactDOM.render(
    <Title titleName="MySite" />,
    document.getElementsByTagName("title")[0]
);

ReactDOM.render(
    <Site siteName="MySite" />,
    document.getElementById("app")
);

Ответы [ 2 ]

0 голосов
/ 14 июня 2019

Есть несколько способов сделать это, и я покажу два пути здесь.

Первый и, вероятно, самый предпочтительный. Используйте медиа-запросы: 

    /* Small devices (Phones, 600pxand down) -- this would display the text at 5.0rem on phones */

@media only screen and (max-width: 600px) {
    h1 {
        font-size: 5.0rem; // you can also use px here...
    }
}


/* Large devices (laptops/desktops, 992px and up) -- This would display the text at 10.0rem on laptops and larger screens */

@media only screen and (min-width: 992px) {
    h1 {
        font-size: 10.0rem; // you can also use px here...
    }
}

Другой вариант - он просто масштабирует ваш текст: 

h1{
 font-size: 10vw;
}
0 голосов
/ 14 ноября 2018

У меня есть пара предложений.

(1) Как правило, если вы хотите адаптивный размер шрифта, рассмотрите возможность использования единицы ширины окна просмотра vw для размера шрифта, если вы сделаете это, размер шрифта будет масштабироваться с областью просмотра или размер окна.

И чтобы компенсировать слишком малый размер шрифта на мобильном устройстве, используйте calc (), чтобы добавить минимальный размер шрифта

Вот пример:
CSS 

html { font-size: calc(1em + 1vw); }

просмотреть это видео

В этом примере я применил размеры к элементу html, вы, конечно, могли бы применить что-то похожее только к заголовкам или другим селекторам на странице.

(2) Что касается описанной вами конкретной проблемы, связанной с тем, что шрифт становится слишком маленьким на вашем телефоне, то мое первое подозрение заключается в том, что причина в том, что вы забыли включить метатег viewport в заголовок документа. Пожалуйста, попробуйте что-нибудь подобное и посмотрите, поможет ли это: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />  
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello React!</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...