!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. 【CSS3】CSS3自学

    CSS3学习网址:http://www.runoob.com/css3/css3-tutorial.html

  2. VMware上安装VMware tools

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/walkerkalr/article/details/34896407  VMware上安装VMw ...

  3. linux报错 find: missing argument to `-exec'

    在linux下使用find命令时,报错:find: missing argument to `-exec' 具体执行命令为: find /u03 -name server.xml -exec grep ...

  4. 使用对象作为hashMap的键,需要覆盖hashcode和equals方法

    1:HashMap可以存放键值对,如果要以对象(自己创建的类等)作为键,实际上是以对象的散列值(以hashCode方法计算得到)作为键.hashCode计算的hash值默认是对象的地址值. 这样就会忽 ...

  5. window下安装mongodb3.6

    系统:Win10 x64位 1.在官网下载对应的mongod https://www.mongodb.com/download-center?jmp=nav#community 2.下载后在win+R ...

  6. pymongo--Bulk Write Operations

    mongo支持客户端进行批量写操作,其基于单一集合. mongo数据库允许应用程序指定用于批量写操作的可接受的等级. mongo提供方法db.collection.bulkWrite()用于批量插入, ...

  7. 机器学习理论基础学习3.3--- Linear classification 线性分类之logistic regression(基于经验风险最小化)

    一.逻辑回归是什么? 1.逻辑回归 逻辑回归假设数据服从伯努利分布,通过极大化似然函数的方法,运用梯度下降来求解参数,来达到将数据二分类的目的. logistic回归也称为逻辑回归,与线性回归这样输出 ...

  8. iOS 网易彩票-3常见设置

    Navigation导航设置 为了统一管理导航控制器,需要自定义导航控制器MJNavigationController,继承于UINavigationController.分别设置5个Navigati ...

  9. AspxGridView点滴

    1:页码设置 1>: <SettingsPager Summary-Text="当前第 {0} 页 总共 {1} 页 ({2} 条记录)"></Settin ...

  10. 第七章之main函数和启动例程

    main函数和启动例程 为什么汇编程序的入口是_start,而C程序的入口是main函数呢?本节就来解释这个问题.在讲例 18.1 “最简单的汇编程序”时,我们的汇编和链接步骤是: $ as hell ...