!function(n){var e=n.document,t=e.documentElement,i=750,d=i/50,o="orientationchange"in n?"orientationchange":"resize",a=function(){var n=t.clientWidth||320;n>750&&(n=750),t.style.fontSize=n/d+"px"};e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))}(window);

将上面这段JS引入到html中 之后 在scss文件中这样写 就可以用了

$fsz:50;
@function rem($value){
    @return  $value/$fsz*1rem;
}
.fsz{
    font-size: rem(100)
}

js媒体查询设置根字号的更多相关文章

  1. 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

    @media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...

  2. CSS3及JS媒体查询教程

    CSS3媒体查询: 语法: <media_query_list>:<media_query>[,<media_query>] <media_query> ...

  3. JS媒体查询

    样式的改变使用C3的媒体查询 行为和功能的改变使用JS的媒体查询 matchMedia()方法参数可写任何一个CSS@media规则,返回的是新的MediaQueryList对象,该对象有两个属性 m ...

  4. Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  5. vue中 用媒体查询 空置根节点字体大小

    在index.html中 <style> @media all and (min-width: 0px) { html{font-size: 20px;}/* 12*4.6 */ } @m ...

  6. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  7. rem适配布局(rem+less+媒体查询 和 rem+flexible.js)

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

  8. 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》

    <meta name="screen-orientation" content="portrait"> <meta name="fu ...

  9. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

随机推荐

  1. 用tomcat发布自己的Java项目

    作为一名web开发人员,用的又是Java语言,少不得和tomcat打交道.tomcat是什么?它是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器.我们用Java开发出来的web项目,通 ...

  2. Oracle Golden Gate原理简介

    Oracle Golden Gate原理简介 http://www.askoracle.org/oracle/HighAvailability/20140109953.html#6545406-tsi ...

  3. Celery框架简单实例

    Python 中可以使用Celery框架 Celery框架是提供异步任务处理的框架,有两种用法,一种:应用程式发布任务消息,后台Worker监听执行,好处在于不影响应用程序继续执行.第二种,设置定时执 ...

  4. js-jquery-数组遍历

    一.原生方法支持 1.普通for循环 for(j = 0; j < arr.length; j++) { } 说明:性能很高,但是仍可以优化. 2.优化版for循环[推荐] for(j = 0, ...

  5. golang使用vet进行语法检查

    go tool vet是你的好朋友,不要忽视它. vet是一个优雅的工具,每个Go开发者都要知道并会使用它.它会做代码静态检查发现可能的bug或者可疑的构造.vet是Go tool套件的一部分,我们会 ...

  6. notefirst使用

    1:如果格式不正确,导入题录失败的话,可以手动添加.点击新建题录即可.输入文章的标题等信息. 2:导入word中的文献,可以使用word中notefirst的引文编辑功能,对文献进行删除,编辑等. 3 ...

  7. [LeetCode] 804. Unique Morse Code Words_Easy tag: Hash Table

    International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...

  8. Leetcode: Longest Consecutive Sequence && Summary: Iterator用法以及ConcurrentModificationException错误说明

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  9. Rpgmaker开发心得(1)且事件

    例:NPC让你给他桃子和梨子,然后给你西瓜. 实际就是:有桃子且有梨子时的判断,但对于大多数不会直接编写脚本的同学,最好的方式就是使用开关. 思路如下: var:变量 on:开关 if(on西瓜=on ...

  10. css3实现头像旋转360度

    css样式: .div a img{ width: 88px; height: 88px; border-radius: 88px; transition: all 1.2s ease-out 0s; ...