rem 使用
html{
font-size:12px;
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}
.p{font-size: 2rem;}
</style>
<script>
alert("ddd");
document.getElementsByTagName('html')[].style.fontSize = "20px";
alert(document.getElementsByTagName('html')[].style.fontSize); //1.6rem*window.innerWidth / 320 + 'px';
</script>
</header>
<body> <div>
qwertyuiop
<p class="p">yyyyyy</p>
<button class="btn"> click </button>
</div> </body>
</html>
rem 使用的更多相关文章
- 在rem布局下使用背景图片以及sprite
现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...
- 移动端自适应之——rem与font-size
需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...
- px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
- px-rem 一个将px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...
- 基于rem的移动端自适应解决方案
代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...
- px和em,rem的区别
1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...
- Sublime 插件- px 转rem
一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目 https://github.com/hyb628/cssrem.git 进入packag ...
- 响应式布局-Rem的用法
前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动. 先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...
- 手机端页面自适应之rem布局
W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...
- WebApp开发之--"rem"单位
随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...
随机推荐
- 获取类似QQ似的时间,昨天或具体日期
最近在做一个聊天功能,并且要在用户列表上显示最后聊天时间,类似QQ的日期显示. 问群里和百度后,群里没人鸟我,网上也没搜到,最后苦于无奈只能自己封装了. 不过话说回来了,大哥与小弟的区别就是大哥写好封 ...
- Bluefish Editor - 蓝鱼编辑器 for Web Designer
Bluefish is a GTK+ HTML editor for the experienced web designer. Its features include nice wizards f ...
- Excel导入到DataTable ,DataTable导入到Excel
using System; using System.Collections.Generic; using System.Linq; using System.Text; using NPOI.SS. ...
- uni-app 自定义扫码界面
二维码扫描,已经成为当下一款应用不可或缺,同时也是用户习以为常的功能了.uni-app 为我们提供了扫码 API ,直接调用即可. 需求场景 在实际开发中,平台提供的默认扫码界面,并不能满足一些自定义 ...
- hdu 1394 Minimum Inversion Number 【线段树求逆序数】
之前写过树状数组的,再用线段树写一下--- #include<cstdio> #include<cstring> #include<iostream> #inclu ...
- tensorflow之tf.slice()
转载:https://www.jianshu.com/p/71e6ef6c121b https://www.cnblogs.com/chamie/p/11073363.html def slice(i ...
- -java转json hibernate懒加载造成的无限递归问题
1.在判断到底是谁维护关联关系时,可以通过查看外键,哪个实体类定义了外键,哪个类就负责维护关联关系. JoinColumn(name="pid") 2. 在保存数据时,总是先保存的 ...
- vue项目中,如何对static文件夹下的静态文件添加时间戳,以达到清除缓存
例如config.js文件是存放在static文件夹下,里面存放的是websocket信息,需要经常改动.改动了以后由于缓存信息,使其不生效,因此需要对引入的文件添加时间戳. 最新方法: 注意转义符的 ...
- Django REST Framework 数码宝贝 - 3步进化 - 混合类 -->
读了我这篇博客, 你会刷新对面对对象的认知, 之前的面对对象都是LJ~~~ 表结构 class Publisher(models.Model): name = models.CharField(max ...
- 【转】C语言将字符串转换成对应的数字(十进制、十六进制)
转自:http://wawlian.iteye.com/blog/1315133 1.一个十进制数字的字符串表示转换成对应的整数.举例:将“1234”转换成整数1234 /*将字符串s转换成相应的整数 ...