!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. DOM对象与Jquery对象转换

    dom对象的样式是这么加的(js) .style.background = “red”; jquery对象样式是这么加的(jq) .css(“background”,”red”); <div i ...

  2. 使用PHP创建一个REST API(译)

    最近API在网络领域有些风靡,明确的说是REST的影响力.这实在没什么好惊讶的,因为在任何编程语言中,消费REST API都是非常的容易.构建它也非常的简单,因为本质上你不会用到任何那些已存在很久的H ...

  3. Linux中Readlink命令

    原文地址:http://blog.csdn.net/liangxiaozhang/article/details/7356829 readlink是Linux系统中一个常用工具,主要用来找出符号链接所 ...

  4. [LeetCode] 104. Maximum Depth of Binary Tree_Easy tag: DFS

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  5. windows7下docker配置镜像加速

    原文地址:https://blog.csdn.net/slibra_L/article/details/77505003 1,本文目的:windows7下docker配置镜像加速,下面是具体操作步骤: ...

  6. C# 开发圆角控件(窗体)

    最近在做卡片视图的程序,要求将控件做成带有圆角的效果,下面是我在网上查找的资料,经过测试,确定可以实现功能.其中方法三既适应于控件,也适应于窗体. 先上传效果图: 方法一: 增加命名空间:using  ...

  7. Integer类之缓存

    在开始详细的说明问题之前,我们先看一段代码 1 public static void compare1(){ 2 Integer i1 = 127, i2 = 127, i3 = 128, i4 = ...

  8. 【week6】团队贡献分

    小组名称:nice! 小组成员:李权 于淼 杨柳 刘芳芳 项目内容:约跑app 完成任务:   10% 20% 70% 好   于淼 李权 中   刘芳芳 杨柳 差       1.李权8.4 2.于 ...

  9. MyBatis学习笔记(八)——Mybatis3.x与Spring4.x整合

    转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4271627.html 一.搭建开发环境 1.1.使用Maven创建Web项目 执行如下命令: mvn arc ...

  10. python在交互模式下直接输入对象后回车,调用的是对象的__repr__()方法,这个方法表示的是一个编码,用print+对象是调用对象的__str__方法

    交互模式下调用对象的__repr__()方法,这个方法表示的是一个编码 >>> u"国庆节快乐"u'\u56fd\u5e86\u8282\u5feb\u4e50' ...