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它绝对是 ...
随机推荐
- Usaco 滑雪比赛 Bobsledding, 2009 Dec(dp)
Description 滑雪比赛bobsled 贝西参加了一场高山急速滑雪比赛,滑道总长度为 L.出发时,她的初速度为 1,贝西可以加速 或减速,每过 1 米,她能将速度增加 1.减少 1 或保持不变 ...
- LIst和map的遍历
1. public static void main(String[] args) { // ArrayList类实现一个可增长的动态数组 List<String> list = new ...
- 读书笔记之《HTML5 与 CSS3 基础教程》
1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...
- CorelDRAW X6+PhotoZoom这组合,无敌了啊!
520就这样毫无察觉的过去了,对于额这种单身狗,额表示,什么520,什么情人节,统统略过,,可是,可是,即便这样,还是硬生生的吃了一把来势凶猛的远在天际的狗粮,当我看到CorelDRAW X6和Pho ...
- CentOS 6.5下部署日志服务器 Rsyslog+LogAnalyzer+MySQL
简介 LogAnalyzer 是一款syslog日志和其他网络事件数据的Web前端.它提供了对日志的简单浏览.搜索.基本分析和一些图表报告的功能.数据可以从数据库或一般的syslog文本文件中获取,所 ...
- LeetCode Golang 单向链表相加 反向实现
LeetCode 两数之和, 反向实现 1 -> 2 -> 3 -> 4 + 3 -> 4 ------------------------- ...
- Hadoop HA 与 Federation
最近在做Hadoop上应用开发,需要和HA集成,active name node 切换不能影响应用的运行.在研究HA背景的同时,发现HA和Federation 配置中共用了nameservices 的 ...
- ZOJ 3911Prime Query [素数处理 + 线段树]
Time Limit: 5 Seconds Memory Limit: 196608 KBYou are given a simple task. Given a sequence A[i] with ...
- 【XSY2689】王子 - 网络流
复活!qwq 题目来源:2018冬令营模拟测试赛(九) 题意: [背景描述] 不是所有王子都会遇见自己的中关村,主公,公主. 从前有个王子姓王,王王子遇到了一位美丽的公主,她的名字当然是公公主 ...
- laravel contains 的用法
最近在学laravel,做一下学习笔记. 1.contains()方法判断集合是否包含给定的项目: ]);var_dump($collection->contains('Desk'));// t ...