!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. mysql 表基本增删查改

    对表的操作是在某个数据库下才能进行的,所以要先选择数据库 "use 数据库名;" 1.创建数据表 1)"create table 表名 (字段1  类型  [约束],  ...

  2. (1.2)mysql 索引概念

    索引的存储分类:mysql目前提供了以下4种索引 [1]B-Tree索引:最常见的索引类型,大部分引擎都支持B树索引 [2]HASH索引:只有Memory引擎支持,使用场景简单 [3]R-Tree索引 ...

  3. python platform模块

    该模块用来访问平台相关属性. 常见属性和方法 系统名称 platform.system() 返回系统/操作系统名称,例如“Linux”,“Windows” >>> platform. ...

  4. 页面加载之window.onload=function(){} 和 $(function(){})的区别

    通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...

  5. opencv之颜色过滤只留下图片中的红色区域

    如图,这次需要在图片中找到卷尺的红色刻度,所以需要对图像做过滤,只留下红色部分. 一开始的想法是分别找到RGB值,然后找到红色区域的部分保留就可以了,不过好像很难确定红色区域的RGB取值范围,所以要把 ...

  6. js实现网页tab选项卡切换效果

    <style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} u ...

  7. rpm服务的独立服务管理

    /etc/init.d  启动脚本的位置 /etc/sysconfig/ 初始化环境配置文件 /etc/   配置文件位置 /etc/xinetd.conf  xinetd配置文件 /etc/xine ...

  8. 跑道标识和那些复杂的灯光系统 and 简介、编号、参数、标志及数量 and 飞机跑道标准与参数

    http://www.360doc.com/content/16/0616/12/32670666_568219786.shtml http://news.carnoc.com/list/365/36 ...

  9. AOAPC I: Beginning Algorithm Contests -- Training Guide (Rujia Liu) Chapter 3. Data Structures Fundamental Data Structures

    10410 这题说的是给了一棵多叉树的 bfs遍历轨迹 和dfs 遍历 轨迹 在父节点向叶子节点扩展的时候优先遍历编号较小的节点.我还原出这课树特殊判定 根据bfs的顺序来建立这课树,用一个队列安排要 ...

  10. python 正则表达式匹配ip

    >>> re.match(r'^(([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d\d|2[0-4]\d| ...