单位rem 触屏适配总结
总结过的:定宽320 缩放适配手机屏幕
参考文章:web app变革之rem
先了解一下rem
css3 中引入了新的长度单位,rem。 官方定义 font size of the root element rem:rem和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。
兼容性:IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持。(IE6-8不支持 不过考虑是移动端web app )
设置rem的小练习
html的font-size设置为20px
html{font-size: 20px;}
button{width: 5rem;height: 2rem;background-color: orange;color: #fff;font-size: 1.2rem;border:0;}
html的font-size设置为40px
从这个小练习里就可以知道rem单位元素的大小是根据html font-size变化的,这就是rem做适配的原理。
rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数。
html{
font-size: 10px; /* 设置html为10px */
}
h1{
font-size: 2rem; /* 10px*2=20px */
}
rem切稿开发
那么我们怎么把设计稿里的单位转换成rem进行开发呢?
首先假设我的页面设计稿给我时候是按照640的标准尺寸给我的前提下,(当然这个尺寸肯定不一定是640,可以是320,或者480,又或是375)来看一组表格。
屏幕根据设计稿的比例转换对应的rem值,比如:
640的设置 = 20*(clientWidth/320)
320的设置 = 10*(clientWidth/320)
设置html font-size的工作我们交给js去实现,所以我的切稿元素都按照 (元素设计稿px/20 = 最终的rem):
/*rem adaptation*/
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
}; recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
// doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
最后再看一下实例效果:
所有元素margin padding font-size width height都是rem
*{margin:0;padding:0;}
.box {padding:10rem;}
.box p{font-size:12rem;line-height: 20rem;}
.box a{display: block;line-height: 40rem;text-align: center;background-color: #2dcb54;color: #fff; font-size:16rem;margin-top:12rem;}
单位rem 触屏适配总结的更多相关文章
- 使用canvas时, 如何用相对单位(rem, rpx)来适配不同机型
使用canvas的api时, 使用的都是绝对数值, 如: 方法传参是坐标位置,不带单位,如ctx.translate(10,10); 那么此时, 我就需要将rem或rpx 转换成 px; 首先, 获取 ...
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- webapp:移动端高清、多屏适配方案(zz)
来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- 移动端高清、多屏适配方案 [来源:http://div.io/topic/1092]
Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 解惑好文:移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 移动端,多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
随机推荐
- python与各数据库的交互
from redis import StrictRedis from pymongo import MongoClient import pymysql #redis客户端 redis_cli = S ...
- AtCoder Grand Contest 013题解
传送门 \(A\) 先把相同的缩一起,然后贪心就可以了 //quming #include<bits/stdc++.h> #define R register #define fp(i,a ...
- Python之☞float浮点数精度问题
Python的浮点数损失精度问题(转) 一个简单的面试题: >>>0.1+0.1+0.1 0.2 >>>0.1+0.1+0.1 0.3000000000000000 ...
- Cayley-Hamilton定理与矩阵快速幂优化、常系数线性递推优化
原文链接www.cnblogs.com/zhouzhendong/p/Cayley-Hamilton.html Cayley-Hamilton定理与矩阵快速幂优化.常系数线性递推优化 引入 在开始本文 ...
- Compiling OpenCV: VTK Not Found on Ubuntu 16.04 LTS
When installing OpenCV: /usr/bin/vtk not found libvtkRenderingPythonTkWidgets.so not found /usr/bin/ ...
- rapidxml学习
参考: 官网http://rapidxml.sourceforge.net/ https://blog.csdn.net/wqvbjhc/article/details/7662931 http:// ...
- NoSql数据库Redis系列(2)——Redis数据类型
一.设计 Redis Key (一).分段设计法 使用冒号把 key 中要表达的多种含义分开表示,步骤如下: 1.把表名转化为 key 前缀 2.主键名(或其他常用于搜索的字段) 3.主键值 4.要存 ...
- 将WSL2作为生产力工具
适用于 Linux 的 Windows 子系统 (WSL) 是 Windows 10新增的功能,使用它可以直接在 Windows 上运行 Linux 命令.而WSL 2 是WSL的一个新版本,它支持适 ...
- VS2017打包注册IE插件及修改IE安全选项设置【转】
前言 最近项目需要在浏览器环境下读取员工身份证信息,要实现网页与硬件设备通信,考虑了几种实现方式: 1.借助ActiveX插件,通过程序库直接与设备通信. 优点:厂家提供了IE插件,开发简单 缺点:只 ...
- CMU Database Systems - Parallel Execution
并发执行,主要为了增大吞吐,降低延迟,提高数据库的可用性 先区分一组概念,parallel和distributed的区别 总的来说,parallel是指在物理上很近的节点,比如本机的多个线程或进程,不 ...