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网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
随机推荐
- 自定义Metrics:让Prometheus监控你的应用程序
前言 Prometheus社区提供了大量的官方以及第三方Exporters,可以满足Prometheus的采纳者快速实现对关键业务,以及基础设施的监控需求. 如上所示,一个简单的应用以及环境架构.一般 ...
- Lodash入门介绍
原文额地址 http://www.w3cplus.com/javascript/lodash-intro.html 有多年开发经验的工程师,往往都会有自己的一套工具库,称为 utils.helper ...
- ajax请求session失效重定向到登录页面
在ajax请求的页面引入一个自定义的AjaxRedirect.js的文件 AjaxRedirect.js的代码如下: $(function(){ $.ajaxSetup({ type: 'POST', ...
- phpstorm中FTP自动同步功能
首先打开PhpStorm软件,新建个项目完成以后,找到Tools, 找到 Tools->Deployment->configruation点击进行设置, 点击configruation ...
- 一些ios牛人的博客
王巍的博客:王巍目前在日本横滨任职于LINE.工作内容主要进行Unity3D开发,8小时之外经常进行iOS/Mac开发.他的陈列柜中已有多款应用,其中番茄工作法工具非常棒.http://onevcat ...
- iis服务器配置
对应的步骤在文件中上传了rar文件 1 .net framework 4.0 和 framework 4.5 直接安装程序 先安装4.0 再安装4.5 顺序不能颠倒!下载完直接安装 如果有会提示本机 ...
- Summary: difference between public, default, protected, and private key words
According to Java Tutorial: Controlling Access to Members of a Class Access level modifiers determin ...
- Web前端开发推荐阅读书籍、学习课程下载
转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...
- 利用<object>和<embed>实现视频播放
直接使用<object>或<embed>都可以实现视频播放,那么两者的区别是什么? 1.是为了兼容不同浏览器,IE只支持对Object的解析:火狐,谷歌,Safari只支持对E ...
- yii的url写法
Yii 各种url地址写法 echo Url::home(); 生成入口地址/yii2test/frontend/web/index.php: echo Url::base();生成入口文件夹地址: ...