!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. Java-小技巧-002-String 转 long

    1.转化 long l = Long.parseLong([String]); 相当于 long l = Long.parseLong([String],10); long l = Long.valu ...

  2. 微软官方出的各种dll丢失的修复工具

    例如 :因为计算机中丢失 api-ms-win-crt-runtime-l1-1-0.dll.尝试重新安装该程序以解决此问题. 软件名称: Visual C++ Redistributable for ...

  3. Spark性能优化(二)

    资源调优 调优概述 在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要 ...

  4. [kx]人眼结构&凹/凸透镜成像及生活应用

    物理学中的lamba光谱: http://www.cnblogs.com/iiiiiher/diary/2018/04/05/8724339.html 思路: 电磁光谱-->可见光-->人 ...

  5. Centos7 Zabbix3.2集群安装

    安装环境:服务器10.80.0.191作为zabbix-server,10.80.0.191-195作为zabbix-agent. [zabbix@miyan ~]$ cat /etc/redhat- ...

  6. 【weka】分类,cross-validation,数据

    一.分类classifier 如何利用weka里的类对数据集进行分类,要对数据集进行分类,第一步要指定数据集中哪一列做为类别,如果这一步忘记了(事实上经常会忘记)会出现“Class index is ...

  7. CloudFlare防护下的破绽:寻找真实IP的几条途径

    本文仅代表作者独立观点,本文提及的技术仅供安全研究和渗透测试用途 看Twitter发现CloudFlare总裁什么的最近很高调,北京.香港的跑着参加会议.发表演说什么的,CloudFlare似乎也没那 ...

  8. LeetCode--687. 最长同值路径

    题目描述:给定一个二叉树,找到最长的路径,这个路径中的每个节点具有相同值.这条路径可以经过也可以不经过根节点.注意:两个节点之间的路径长度由它们之间的边数表示. 示例1:输入: 5 / \ 4 5 / ...

  9. 处理hash冲突

    “处理冲突” 的实际含义是: 为产生冲突的地址寻找下一个哈希地址. 1. 开放定址法 2. 链地址法 ------------------------------------------------- ...

  10. 7.11 Models -- Customizing Adapters

    一.概述 1. 在Ember Data中,和后台数据存储通信的逻辑存在于Adapter中.Ember Data的有一些内置的假设,一个 REST API 应该怎么看.如果你的后台约定和这些假设不同,E ...