!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. 【解决】win10 启用系统保护 灰色 不可选 的解决办法

    安装Win10后,发现系统保护无法启用.'启用系统保护' 灰色 不可选状态: 搜了一堆解决办法,包括: 1.组策略修改 2.服务启用 3.各种重启 等,不适用. 然后,我把系统预留分区 删了,删了…… ...

  2. 腾讯云的云数据库MYSQL配置

    腾讯云的云数据库MYSQL配置

  3. 3.对神经网络训练中Epoch的理解

    代表的是迭代的次数,如果过少会欠拟合,反之过多会过拟合 EPOCHS 当一个完整的数据集通过了神经网络一次并且返回了一次,这个过程称为一个 epoch.   然而,当一个 epoch 对于计算机而言太 ...

  4. [py]letcode第一题求和

    letcode第一题, tm的不好弄. 想了很久想到了一个粗蠢的解决办法. Given an array of integers, return indices of the two numbers ...

  5. MVC前后台获取Action、Controller、ID名方法 以及 路由规则

    前后台获取Action.Controller.ID名方法 前台页面:ViewContext.RouteData.Values["Action"].ToString();//获取Ac ...

  6. python中的re模块中的向后引用和零宽断言

    1.后向引用 pattern = re.compile(r"(\w+)")#['hello', 'go', 'go', 'hello'] # pattern = re.compil ...

  7. python 一个.py文件如何调用另一个.py文件中的类和函数

    原文地址https://blog.csdn.net/winycg/article/details/78512300 在同一个文件夹下 调用函数:

  8. 单利模式及python实现方式

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. ...

  9. liferay常用api总结

    liferay之笑傲江湖学习笔记<一> 我们大家都知道,想要在一项技术上过硬,你需要付出汗水的,需要闭门修炼,每一个成功的人,都是那种耐得住寂寞的人,好了闲话少说.开始学习之旅 在life ...

  10. liferay中如何获取实例的id和portletId

    在Portlet中request分为两种renderRequet和actionRequest而portlet需要取得实例Id的时候都在renderRequest的时候才可以取到,如下例子 Portle ...