!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. Web Responsive Table, 只需CSS使table在手机和平板中完美显示

    在做responsive或者手机版页面的时候,经常碰到<Table>在手机和平板中会因为长度问题把页面撑大.最近看到一个比较好,比较方便的方法,而且仅仅用CSS 2就可以实现! 实例URL ...

  2. SQL Server 镜像证书过期处理

    转自:https://www.cnblogs.com/trams/archive/2012/01/13/2321637.html SQL Server 镜像证书过期处理 今天镜像中的主服务器进行维护重 ...

  3. SQL Server 登录名、服务器角色、用户名和数据库角色 --- 解释

    一.基本解释 登录名:登录服务器的用户账号: 服务器角色:登录名对该服务器具有的权限,角色分多种的,一个角色可以有多个登录名,如操作系统的系统用户可以有多个. SQL服务器角色  sysadmin   ...

  4. android加载gif图片

    Android加载GIF图片的两种方式 方式一:使用第三开源框架直接在布局文件中加载gif 1.在工程的build.gradle中添加如下 buildscript { repositories { m ...

  5. InnoSQL/MySQL并行复制的实现与配置

    InnoSQL/MySQL并行复制的实现与配置 http://www.innomysql.net/article/6276.html 并行复制之前的解决方案 InnoSQL在5.5.30-v4版本中支 ...

  6. 2017php经典面试题

    1.PHP语言的一大优势是跨平台,什么是跨平台?一.PHP基础: PHP的运行环境最优搭配为Apache+MySQL+PHP,此运行环境可以在不同操作系统(例如windows.Linux等)上配置,不 ...

  7. gcc static静态编译选项提示错误修正(/usr/lib/ld: cannot find -lc)

    用gcc静态编译C程序时显示出: /usr/lib/ld: cannot find -lc /usr/lib/ld: cannot find -lgcc_s /usr/lib/ld: cannot f ...

  8. js实现轮播图2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Perl中的正则表达式(五)

    正则表达式(Regular Expression),在Perl里边通常也叫做模式(Pattern),用来表示匹配(或不匹配)某个字符串的特征模板. 使用简单模式:若模式匹配的对象是$_的内容,只要把模 ...

  10. A7架构

    以Cortex-A7 MPCore processor来进行说明,这是一款主打低功耗的多核处理器,采用ARMv7-A架构,最多支持4个core. 每个core都有L1级的Cache,分为instruc ...