随笔

Responsive Fonts

方案一

设计宽度为 750px
假设字体大小为 100px

字体随屏幕大小变化

var defaultFontSize = 100,
    defaultWidth = 750,
    multiple = realWidth / defaultWidth,
    realFontSize = multiple * defaultFontSize;

document.querySelector("html").style.fontSize = realFontSize + "px";

定义 sass 函数

@function d2r($size) {
    @return $size / 100 + rem;
}

使用

假设有一物体宽高比为: 25x35
转换后为: .25rem x .35rem

.block-1{
    width: d2r(25);
    height: d2r(35);
}

本文链接：https://note.lilonghe.net/post/responsive-fonts.html

-- EOF --

作者 lilonghe 发表于2016-12-27 18:26 ，并被添加「 web responsive 」标签

署名-非商业性使用-禁止演绎 (CC BY-NC-ND 4.0)

Copyright ©2015-2024 lilonghe. All rights reserved.