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网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
随机推荐
- java-JProfiler(四)-HelloWorld示例
1.程序代码 package jProfiler; public class Test extends Thread{ public static void main(String[] args) t ...
- a文件.o文件和.so文件有什么区别?
.o类似于windows的.obj .a是多个.o合在一起,用于静态连接. .so文件(shared object)类似于.dll文件.,用于动态连接.
- abap关键字
1:abap将提升的关键字快捷输入 按tab键,提示的关键字将会自动输入. 2:shift tab 用于对其格式 3:ctrl+d 将改行复制到下一行.
- HTTP权威指南读书笔记
HTTP权威指南笔记 读书有两种境界,第一种境界是将书读薄,另一种是读厚.本篇文章就是HTTP权威指南的读书笔记,算是读书的第一重境界,将厚书读薄.文章对HTTP的一些关键概念做了比较详细的概述,通读 ...
- SDUT2826:名字的价值
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2806 名字的价值 Time Limit: 10 ...
- spring用注解简化bean配置
组件扫描: <context:component-scan base-package="com"/> 容器启动后如果发现配置文件有上面的标签会自动扫描对应的包及子包,如 ...
- PHP高并发和大流量的解决方案
第一个要说的就是数据库,首先要有一个很好的架构,查询尽量不用* 避免相关子查询 给经常查询的添加索引 用排序来取代非顺序存取,如果条件允许 ,一般MySQL服务器最好安装在Linux操作系统中 .关于 ...
- 共用tableview一个继承类里面有
里面的复用cell会不会混在一起呢?
- easyDialog参数配置说明
easyDialog不依赖框架,使用起来很简单,只要引入easydialog.js文件就可以使用了: // 引入easyDialog <script src="easydialog.j ...
- 开发人员必备的几款bug管理工具
Bug是软件开发过程中的“副产品”,也是开发人员最不想见到的状况.如果没有跟踪和梳理各种bug和问题并及时解决,项目就会花费非常多的时间,导致整个项目的重心偏移.如果在产品开发过程中,使用一个合适的B ...