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它绝对是 ...
随机推荐
- 阿里云主机ssh 免密码登录
云主机配置: 操作系统: CentOS 7.0 64位CPU: 1 核公网IP: 78.129.23.45用户名: root密码:bugaosuni 本地环境:我在VMware下安装的Ubuntu 1 ...
- vue中通过js控制页面样式方法
在使用vue.js框架的时候,有时候会希望在页面渲染完成之后,再执行函数方法来处理初始化相关的操作,如果只处理页面位置.宽或者高时,必须要在页面完全渲染之后才可以,页面没有加载完成之前,获取到的宽高不 ...
- RedHat/CentOS(Linux)双网卡bond(mode=6)
1. 将/etc/sysconfig/network-scripts/ifcfg-ens1f0和ifcfg-ens1f1文件备份到root目录下2. 修改/etc/sysconfig/network- ...
- 页面加载通过javascript来修改控件属性
function changeFormElementStatus(tagNames) { var tagNameArr = tagNames.split("," ...
- windows下Keras框架搭建
1. 安装Anaconda https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ conda info来查询安装信息 conda list可以查 ...
- input输入框只允许输入数字
/* input输入框只允许输入数字*/ <input type="text" onkeypress="keyPress()" > function ...
- PHP学习过程中遇到的疑难杂症
变量当双引号中包含变量时,变量会与双引号中的内容连接在一起:当单引号中包含变量时,变量会被当做字符串输出. Heredoc结构形式首先使用定界符表示字符串(<<<),接着在“< ...
- thinkphp5-----模板中函数的使用
1.在模板中使用php函数 在thinkphp的html中,我们经常会遇到一些变量难以直接从php控制端直接处理,这些变量只有在模板中循环输出的时候处理比较合适,这个时候,我们就要在模板中使用函数 1 ...
- Linux版本分支图
- MySQL 面试题（一）
原文地址:http://www.2cto.com/database/201311/254385.html 作者:黄杉(红黑联盟) 公司招聘MySQL DBA面试心得 1 2年MySQL DBA经 ...