!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. form表单的enctype属性

    ①application/x-www-form-urlencoded : 数据被编码为名称/值对. ②multipart/form-data : 数据被编码为一条消息,页上的每个控件对应消息中的一个部 ...

  2. javaScript高级教程(一)javaScript 1.6 Array 新增函数

    1.forEach,map,filter三个函数者是相同的调用参数.(callback[, thisArg]) callback is invoked with three arguments: th ...

  3. 001-window版redis安装

    一.参考地址 官方地址:https://redis.io/ windows版本[学习使用]:https://github.com/MicrosoftArchive/redis 二.windows版re ...

  4. 2.搭建cassandra时遇到没有公网网卡的问题

    阿里云服务器有两种网络,一种是经典网络,一种是专用网络,经典网络是公网网卡的,但是专用网络是没有公网网卡的. 如图: 经典网络,公网ip是139.129.31.108: 专用网络,公网ip是 问题: ...

  5. [vue]spa单页开发及vue-router基础

    - 了解spa页面跳转方式:(2种) spa: 单页跳转方式 开发(hash模式): https://www.baidu.com/#2313213 生产(h5利于seo): history.pushS ...

  6. 实习培训——Java基础(4)

    实习培训——Java基础(4) 1 多态 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作,多态性是对象多种表现形式的体现. 现实中,比如我们按下 ...

  7. jQuery在iframe里取得父窗口的某个元素的值

    提供一款jQuery在iframe里取得父窗口的某个元素的值实现,这个iframe用js也差不多,有需要的朋友可以参考一下. 1.在父窗口中获取指定iframe(testiframe) id 为 te ...

  8. c++四种强制类型转化

    c++ 数据类型转换: static_cast dynamic_cast reinterpret_cast const_cast C++ 类型转换(C风格的强制转换): (1)将浮点型数据赋值给整型变 ...

  9. Qt5

    最简单的分割窗体 #include <QApplication> #include <QLabel> #include <QSplitter> int main(i ...

  10. mysql的锁机制

    一.读锁(共享锁/Share Locks,S锁). 1.select * from table_name where ... lock in share mode.(事务A) (1)这种方式是获取指定 ...