使用@mixin或@函数根据屏幕大小更改字体大小
提问于 2020-10-19 13:45:00
我正在尝试使我的scss变量库更具响应性。目前，我有几种不同的字体大小，我想根据屏幕大小进行更改。我想使用一个函数或混入来根据屏幕大小动态改变字体大小。
下面的代码是基本思想。在普通屏幕宽度处插入一个基本大小，并从中获得一个响应式大小。但是，我不能在mixin中返回值，也不能在函数中使用媒体查询。
@function resize($size) {
$result: $size;
@media only screen and (max-width: $phone) {
$result: $size * 0.75;
}
@media only screen and (max-width: $tablet) {
$result: $size * 0.75;
}
@media only screen and (max-width: $laptop) {
$result: $size * 200;
}
@media only screen and (max-width: $desktop) {
$result: $size * 0.75;
}
@media only screen and (max-width: $large-display) {
$result: $size * 0.75;
}
@return $result
}
$h1-font-size: resize(1.5vmin) // outputs a size in the same unit that changes based on screen size
回答 1
Stack Overflow用户
发布于 2020-10-19 14:24:53
这可能会对你有所帮助。
$phone: 320px;
$tablet: 500px;
$laptop: 1200px;
$desktop: 1400px;
$large-display: 1920px;
@mixin resize($size) {
$result: $size;
@media only screen and (max-width: $large-display){
$result: $size * 2;
font-size: $result;
}
@media only screen and (max-width: $desktop){
$result: $size * 1.5;
font-size: $result;
}
@media only screen and (max-width: $laptop){
$result: $size * 1;
font-size: $result;
}
@media only screen and (max-width: $tablet){
$result: $size * .75;
font-size: $result;
}
@media only screen and (max-width: $phone) {
$result: $size * .5;
font-size: $result;
}
}
h1 {
@include resize(40px);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64428683
复制
![pycharm字体大小设置[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/eaeac364bb2f0de1ccfa06c2694e9387.jpg)
腾讯云开发者
