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网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
随机推荐
- js与jQuery差别
jQuery能大大简化Javascript程序的编写,我近期花时间了解了一下jQuery.把我上手过程中的笔记和大家分享出来.希望对大家有所帮助. 要使用jQuery.首先要在HTML代码最前面加上对 ...
- Celery框架简单实例
Python 中可以使用Celery框架 Celery框架是提供异步任务处理的框架,有两种用法,一种:应用程式发布任务消息,后台Worker监听执行,好处在于不影响应用程序继续执行.第二种,设置定时执 ...
- Outlier Detection
1)正态分布数据,飘出95%的可能是异常值.变量var正态标准化,|var|<=1.96的可能是异常值,further chk needed!large sample better. 对于偏态分 ...
- 2018-2019-2 网络对抗技术 20165324 Exp2: 后门原理与实践
2018-2019-2 网络对抗技术 20165324 Exp2: 后门原理与实践 课程学习: 后门 后门:是不经过正常认证流程而访问系统的通道,存在与编译器.操作系统.固件和应用中等等. 后门工作流 ...
- Java接口多线程并发测试 (二)
原文地址http://www.cnblogs.com/yezhenhan/archive/2012/01/09/2317636.html 这是一篇很不错的文章,感谢原博主的分享! JAVA多线程实现和 ...
- iOS 常用小功能 总结
常用小功能 iOS中的很多小功能都是非常简单的,几行代码就搞定了,比如打电话.打开网址.发邮件.发短信等 打电话 方法一(不被采用): 拨号之前会弹框询问用户是否拨号,拨完后能自动回到原应用 NSUR ...
- STA分析(五) parastics
互联线的寄生参数 一般一个cell或者block的连接pin就叫做一个net.在物理实现的时候,一条net可能会穿过几层metal,因为每个metal层的电阻,电容值都不一样.所以,在分析 net的寄 ...
- mysql utf8编码设置
1.建立数据库时指定数据库db_test为utf8编码.: create database db_test character set utf8; 修改数据库db_test编码的命令为: alter ...
- OnClick,OnClientClick和OnServerClick的区别
OnClientClick是客户端事件处理方法,一般采用JavaScript来进行处理,也就是直接在IE端运行,一点击就运行 OnClick是服务器端事件处理方法,在服务器端也就是IIS中运行, ...
- linux chkconfig 管理服务开机自启动
chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...