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网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
随机推荐
- mysql 表基本增删查改
对表的操作是在某个数据库下才能进行的,所以要先选择数据库 "use 数据库名;" 1.创建数据表 1)"create table 表名 (字段1 类型 [约束], ...
- (1.2)mysql 索引概念
索引的存储分类:mysql目前提供了以下4种索引 [1]B-Tree索引:最常见的索引类型,大部分引擎都支持B树索引 [2]HASH索引:只有Memory引擎支持,使用场景简单 [3]R-Tree索引 ...
- python platform模块
该模块用来访问平台相关属性. 常见属性和方法 系统名称 platform.system() 返回系统/操作系统名称,例如“Linux”,“Windows” >>> platform. ...
- 页面加载之window.onload=function(){} 和 $(function(){})的区别
通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...
- opencv之颜色过滤只留下图片中的红色区域
如图,这次需要在图片中找到卷尺的红色刻度,所以需要对图像做过滤,只留下红色部分. 一开始的想法是分别找到RGB值,然后找到红色区域的部分保留就可以了,不过好像很难确定红色区域的RGB取值范围,所以要把 ...
- js实现网页tab选项卡切换效果
<style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} u ...
- rpm服务的独立服务管理
/etc/init.d 启动脚本的位置 /etc/sysconfig/ 初始化环境配置文件 /etc/ 配置文件位置 /etc/xinetd.conf xinetd配置文件 /etc/xine ...
- 跑道标识和那些复杂的灯光系统 and 简介、编号、参数、标志及数量 and 飞机跑道标准与参数
http://www.360doc.com/content/16/0616/12/32670666_568219786.shtml http://news.carnoc.com/list/365/36 ...
- AOAPC I: Beginning Algorithm Contests -- Training Guide (Rujia Liu) Chapter 3. Data Structures Fundamental Data Structures
10410 这题说的是给了一棵多叉树的 bfs遍历轨迹 和dfs 遍历 轨迹 在父节点向叶子节点扩展的时候优先遍历编号较小的节点.我还原出这课树特殊判定 根据bfs的顺序来建立这课树,用一个队列安排要 ...
- python 正则表达式匹配ip
>>> re.match(r'^(([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d\d|2[0-4]\d| ...