Минимальный размер шрифта, который могут отображать браузеры, составляет 12 пикселей, но в дизайне часто встречаются шрифты меньшего размера. Для 11 пикселей я обычно использую 12 пикселей, но абсолютно аморально иметь дело со сверхмалым размером шрифта, например, от 9 до 12 пикселей. Всем может быть известно, что преобразование: масштаб(n) позволяет добиться эффекта уменьшения размера шрифта, но разве вы не обнаружили, что его не очень легко использовать?
Первый пример: видите маленький шрифт размером 9 пикселей внутри красной рамки? Используйте transform: scale(n) для обработки только этой строки, и при уменьшении шрифта расстояние между верхним, нижним, левым и правым краями также уменьшается. Итак, возникает вопрос: можете ли вы выяснить, сколько свободного места остается после сжатия и сколько пикселей нужно согнуть влево, используя margin-left для достижения выравнивания по левому краю? Очевидно нет!
Пустое пространство после сжатия(1 - п) * исходный размер / 2пиксель. Размер оригинала переменный, потому что цена в этой строке копии не всегда 4-значная, и она имеет разные пропорции для разных размеров экрана. Таким образом, описанный выше метод уменьшает шрифт, но не может обеспечить выравнивание по левому краю.
Поясню, почему я упомянул о пустом месте: посмотрите на картинку и сами все поймете.
transform: масштаб(n) перед обработкой:
преобразование: шкала (n) после обработки:
Второй пример: текст центрирован, поэтому не имеет значения, сколько пробелов слева и справа? Впрочем, я тоже так начал думать...
Кажется, что нет никакой проблемы, на самом деле, когда строка текста превышает лимит, два конца не могут быть выровнены с другими строками. Причина должна заключаться в том, что после обработки сокращения остается пустое место.
Вот мое решение:
.tinyscale {
width: 200%;
margin-left: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
Добавьте класс tinyscale в родительский контейнер шириной 100% с мелким шрифтом и умножьте все значения размера и интервала в нем на 2.
После масштабирования в 0,5 раза: ширина восстанавливается до 100%, размеры и интервалы восстанавливаются до нужных значений.
Пустое пространство после сжатия(1 - 0.5) * 200% / 2То есть 50%, поэтому используйте margin-left, чтобы свернуть на 50% влево, и эта обработка не должна учитывать проблему, связанную с тем, что размер по горизонтали не фиксирован.
Недостатком вышеуказанного метода является то, что он применим только к случаю фиксированной высоты, потому что, если значение вертикальной коррекции использует процент, его опорным значением является ширина, а не высота...
Я надеюсь, что великие боги оставят лучшее решение, большое спасибо!
16.05.2017 Продолжение
Как я уже говорил, ситуация с неопределенными высотами не может быть решена. На самом деле, можно иметь дело с ситуацией, когда внешний слой не имеет фиксированной высоты, а внутренний элемент имеет фиксированную высоту. Например:
Все элементы в красной рамке заключены в родительский элемент, родительский элемент имеет фиксированную ширину, мы можем масштабировать его по горизонтали:
.parent {
width: 200%;
margin-left: -50%;
-webkit-transform: scale(0.5, 1);
transform: scale(0.5, 1);
}
Предполагается, что внутренний элемент имеет фиксированную высоту 20 пикселей. Мы можем масштабировать его по вертикали и использовать поле, чтобы свернуть фиксированное значение (1 - 0,5) * 20/2 пикселей по вертикали:
.child {
margin: -5px 0;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
}
Для ситуации, когда внутренние элементы весьма неопределенны, решение еще не придумано, и я надеюсь, что Бог поможет вам!
Автор: Глупое маленькое Мяу
мой задний сад:sunmengyuan.github.io/garden/
мой гитхаб:github.com/sunmengyuan
Оригинальная ссылка:Mengyuan Sun.GitHub.IO/garden/2017…