//获取size公共方法
@mixin
scale_
size
(
$name
,
$size
,
$
midSize
:
null
,
$
largeSize
:
null
)
{
#
{
$name
}
:
$size
;
[data-fontscale='font-sm'] &
{
#
{
$name
}
:
$size
;
[data-fontscale='font-md'] &
{
@if
(
$midSize
)
{
#
{
$name
}
:
$midSize
;
}
@else
{
#
{
$name
}
:
scale
(
$size
,
1.5
)
;
[data-fontscale='font-lg'] &
{
@if
(
$largeSize
)
{
#
{
$name
}
:
$largeSize
;
}
@else
{
#
{
$name
}
:
scale
(
$size
,
2
)
;
// demo.scss
@import '@/assets/style/main.scss';
.demo-page{
@include scale_size('padding', 10px 20px);
定义公共方法// main.scss// size按比例缩放@function scale($size, $scale) { // 遍历 @each $i in $size { $i: $i * $scale; } @return $size;}//获取size公共方法@mixin scale_size($name, $size, $midSize: null, $largeSize: null) { #{$name}: $size; [data-fontsc.
最近，客户又提出新的需求，想要用户可以更改应用的字体大小，为了方便年龄较大的使用者有较好的体验。
当我拿到这个需求第一反应是变量，然后就是scss或less。但是我突然想起之前无意中扫了一眼的文章提到css变量，经过一番学习及实现，嗯，真香，是真的香~
废话不多说，上代码：
<style>
/*变量声明*/
:root { // 放在root里可以全局访问
--bigSize: 0.38rem;// 1 头
--midSize:0.376rem;// 2 标题
--minSi
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement
我们眼中看到的屏幕是由一个一个物理像素组成的，而我们css使用的是逻辑像素，也可以成为虚拟像素。在我们呈现结果的终端，它们的像素比可能都不一样，这时候我们要采用设备的像素比（DPR），它体现了物理像素和逻辑像素之间的关系，计算公式如下所示：
DPR = 物理像素/逻辑像素
所以我们可以知道为啥我们设置的都是12px,14px,为啥显示字体大小不一样。
rem介绍
rem 是相...
利用Sass预处理实现换肤和字体大小调整。
思路及达到的效果：字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配.
实现方法：1.利用全局变量和bus事件，使用js方式调整字体和颜色(这里暂不讨论);
2.利用scss预处理方式...
CSS3 常用四个动画（旋转、放大、旋转放大、移动）在页面设计中，给一些图标或者图片加上一些动画效果，会给人非常舒服的感觉。这里收集了四个常用动画效果，以便不时之需。转载原文效果一：360°旋转 修改rotate(旋转度数)* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
目录uni-app之样式 scss 和 字体图标uni-app之样式 rpx导入外联样式表base.cssdetail.vueuni-app之 字体图标下载字体图标把对应的字体库copy到 static文件下 font文件目录在App之中使用，加载全局使用 字体图标uni-app使用 scss等
uni-app之样式 scss 和 字体图标
注意点：uni-app之中选择器，有id，class，标签等，但是没有 * 选择器
page标签就类似 body
uni-app之样式 rpx
rpx 即响应式
