js媒体查询设置根字号
!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媒体查询设置根字号的更多相关文章
- 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js
@media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...
- CSS3及JS媒体查询教程
CSS3媒体查询: 语法: <media_query_list>:<media_query>[,<media_query>] <media_query> ...
- JS媒体查询
样式的改变使用C3的媒体查询 行为和功能的改变使用JS的媒体查询 matchMedia()方法参数可写任何一个CSS@media规则,返回的是新的MediaQueryList对象,该对象有两个属性 m ...
- Web移动前端开发-——rem+less+媒体查询,rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
- vue中 用媒体查询 空置根节点字体大小
在index.html中 <style> @media all and (min-width: 0px) { html{font-size: 20px;}/* 12*4.6 */ } @m ...
- 移动端开发rem布局之less+媒体查询布局的原理步骤和心得
rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...
- rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
- 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》
<meta name="screen-orientation" content="portrait"> <meta name="fu ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
随机推荐
- sql server 以10分钟分组 统计人数
请问针对时间段从每天早上7点开始统计每十分钟人 解决思路: 我以前做过一个关于月份的,是说每3个月以分组,其实是一样的.不过可能啊,整体数据量大会有问题.如果你只是求一天的,那绝对没问题.[1]如果只 ...
- Python3学习之路~2.6 集合操作
集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 常用操作 >>> list1 = ...
- Kafka核心组件
一.Kafka核心组件及工作方式 Producer :消息生产者,就是向kafka broker发消息的客户端 Consumer :消息消费者,向kafka broker取消息的客户端 Topic : ...
- Centos上把新安装的程序添加到系统环境变量的两种方法
1.软链接 通过命令查看当前系统的环境变量信息,然后软连接形式把程序的地址连接到已经在环境变量中的目录中 echo "$PATH" > /root/tmp 结果如下: /us ...
- js 俄罗斯方块源码,简单易懂
1.自己引入jquery <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- javascript 获取元素样式的方法
javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div s ...
- iOS 开发笔记-plist使用
1.创建一个plist 2.填写为ImageList.plist 3.填入数据 4.完成 加载代码: @interface UYViewController () //图片信息的数组 @propert ...
- Redis的设计与实现——字典
参考博客 绝大多数语言中的字典底层实现基本上都是哈希表.哈希表中用 “负载因子” 来衡量哈希表的 空/满 程度.为了让负载因子在一定的合理范围之内,提高查询的性能,一般的做法是让哈希表扩容,然后reh ...
- 关闭Oracle 11g的DPR特性
关闭Oracle 11g的DPR(Direct Path Read)特性 查看event参数值: SQL> show parameter event NAME TYPE VALUE ------ ...
- OpenCV Mat数据类型及位数总结(转载)
OpenCV Mat数据类型及位数总结(转载) 前言 opencv中很多数据结构为了达到內存使用的最优化,通常都会用它最小上限的空间来分配变量,有的数据结构也会因为图像文件格式的关系而给予适当的变量, ...