!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样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...

  2. 据库被标记为RESTORING的处理方式,正在还原中,正在恢复

    关键词:正在还原,正在恢复,restoring,RECOVERING 转自:http://limindo.blog.163.com/blog/static/2647585620101161154121 ...

  3. kettle 安装mysql 驱动

    错误连接数据库 [mysql] : org.pentaho.di.core.exception.KettleDatabaseException: Error occurred while trying ...

  4. Linux定时任务出现问题时正确的解决步骤

    但凡是提供服务的,都要有本账.软件服务也不例外.无论是Apache,Nginx,还是我们自己搭建的网站,日志是标配.这里的日志就是一本账. 当定时任务出现问题时,正确的处理步骤是: 1,定时任务服务是 ...

  5. 在ASP.NET Web Application中通过SOAP协议调用Bing搜索服务

    本文介绍了如何在ASP.NET Web Application中将Bing搜索作为Web Service来使用,并通过HTTP的SOAP协议在ASP.NET Web Application中调用Bin ...

  6. SQL备份数据库代码

    SQL备份数据库代码 #region 服务每天备份一次数据库 /// <summary> /// 服务每天备份一次数据库 /// </summary> public void ...

  7. selenium WebDriver处理文件下载

    下载文件WebDriver 允许我们设置默认的文件下载路径.也就是说文件会自动下载并且存在设置的那个目录中.下面以FireFox 为例执行文件的下载. package com.mypro.jase; ...

  8. linux rz sz

    对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...

  9. #C++初学记录(ACM试题1)

    A - Diverse Strings A string is called diverse if it contains consecutive (adjacent) letters of the ...

  10. Servlet—文件上传

    什么是Commons? Apache的一个开源子项目,Commons-FileUpload是 Conmmons下子项目. Commons-FileUpload的作用? 1:该组件可以方便地嵌入JSP页 ...