最近，客户又提出新的需求，想要用户可以更改应用的字体大小，为了方便年龄较大的使用者有较好的体验。

当我拿到这个需求第一反应是变量，然后就是scss或less。但是我突然想起之前无意中扫了一眼的文章提到css变量，经过一番学习及实现，嗯，真香，是真的香~

废话不多说，上代码：

<style>
/*变量声明*/
:root { // 放在root里可以全局访问
   --bigSize: 0.38rem;// 1 头
   --midSize:0.376rem;// 2 标题
   --minSizemid:0.32rem;// 4  一般内容都用这个就行
   --minSizeMin:0.29rem;// 5  小提示
/* 变量使用 */
.bigFontSize{font-size:var(--bigSize);
<style>
/* 当用户手动更改字体大小时 */
<script>
document.body.style.setProperty("--bigSize", "0.34rem"); // 改变变量的值
// 也可以单纯读取变量的值
var docu = getComputedStyle(document.documentElement);
var color = docu.getPropertyValue('--bigSize').trim();
</script>
                    最近，客户又提出新的需求，想要用户可以更改应用的字体大小，为了方便年龄较大的使用者有较好的体验。当我拿到这个需求第一反应是变量，然后就是scss或less。但是我突然想起之前无意中扫了一眼的文章提到css变量，经过一番学习及实现，嗯，真香，是真的香~废话不多说，上代码：&lt;style&gt;/*变量声明*/:root { // 放在root里可以全局访问   --bigSize: 0.38rem;// 1 头   --midSize:0.376rem;// 2 标题   --minSi
				
响应字体大小
一个 SASS mixin，可以轻松创建基于屏幕宽度缩放字体大小的布局。 依赖于媒体查询。
 提供四个参数，这个 mixin 将智能地找出正确的媒体查询定义，使字体随屏幕宽度流畅地缩放，而无需您自己计算阈值和大小。
 @import "responsive-font-size";
    @include responsive-font-size (1.8em, 3.7em, 640px, 1200px, 0.3em);
或者（如果你想直截了当地说）： 
    @include responsive-font-size (
        $min-font-size: 1.8em,
        $max-font-size: 3.7em,
        $min-screen-width: 640px,
        $max-s
　利用Sass预处理实现换肤和字体大小调整。
　思路及达到的效果：字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制。页面初始化是的字体适配可以根据devicePixelRatio和css3 media进行适配.
　实现方法：1.利用全局变量和bus事件，使用js方式调整字体和颜色(这里暂不讨论);
　　　　　　2.利用scss预处理方式...
				
在这里记录一下开发过程中突然喜欢上的CSS/CSS3  var()变量以及calc()函数 ,  让在不使用sass以及less的情况下也能进行一个比较高效的样式设置
var()变量
var变量的定义语法  :   - -变量名 两个短横线加上变量名
var变量的使用 : var(- -变量名)
我们可以在body中或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用
例如在body中定义:
body{
	--fontSize: 18px;
	--color: #000000;
//获取size公共方法
@mixin scale_size($name, $size, $midSize: null, $largeSize: null) {
  #{$name}: $size;
  [data-fontsc.