移动端rem用法总结
先介绍一下这个近年来突起的黑马
参考的是<html>这个标签的font-size。rem中的r就是root根的意思。
所以rem要比em好用的多，因为em参考的是父亲的字号，和rem永远参考的是根元素（html标签）的字号。
rem被发明，实际上是为了做字号的变化方便一点。
中国的前端工程师，发现，rem不仅仅可以用来设置字号。还可以用来设置任何需要长度的地方。比如：
width、height、line-hight、background-size、border-width。
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
第二种办法 来了
<script>
(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 = 20 * (clientWidth / 320) + 'px';
}; if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
好了 大家赶紧去试试吧 如果有什么问题欢迎留言 新手总结 欢迎拍板
移动端rem用法总结的更多相关文章
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- 关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
- 第130天：移动端-rem布局
一.关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
- 07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
- 移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
- 移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...
- 移动端rem适配&iOS兼容
移动端rem适配js // 默认375,750设计稿请将375替换为750 (function (doc, win) { // 移动端适配 var docEl = doc.documentElemen ...
- H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
随机推荐
- 2019年，iOS开发的你不可或缺的进阶之路！
序言 我相信很多人都在说,iOS行业不好了,iOS现在行情越来越难了,失业的人比找工作的人还要多.失业即相当于转行,跳槽即相当于降低自己的身价.那么做iOS开发的你,你是否在时刻准备着跳槽或者转行了. ...
- IIS配置导入导出
使用管理员身份运行cmd 应用程序池: # 导出所有应用程序池 %windir%\system32\inetsrv\appcmd list apppool /config /xml > c:\a ...
- Node.js——fs模块(文件系统)，创建、删除目录(文件)，读取写入文件流
/* 1. fs.stat 检测是文件还是目录(目录 文件是否存在) 2. fs.mkdir 创建目录 (创建之前先判断是否存在) 3. fs.writeFile 写入文件(文件不存在就创建,但不能创 ...
- 嵌入式C语言自我修养 13：C语言习题测试
13.1 总结 前面12节的课程,主要针对 Linux 内核中 GNU C 扩展的一些常用 C 语言语法进行了分析.GNU C 的这些扩展语法,主要用来完善 C 语言标准和编译优化.而通过 C 标准的 ...
- BurpSuite—-Repeater模块(中继器)
一.简介 Burp Repeater 是一个手动修改并补发个别 HTTP 请求,并分析他们的响应的工具.它最大的用途就是和其他 Burp Suite 工具结合起来.你可以从目标站点地图,从 Burp ...
- A1033
找出最小开销. 思路: 出发点的加油站编号设为0,终点的加油站编号设为n,其他加油站编号按距离依次排序. 如果0号加油站的距离!=0,则无法出发,行驶距离为0. 从起点开始,寻找规则为,如果存在油价小 ...
- 20155310 2016-2017-2 《Java程序设计》第一周学习总结
20155310 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 通过对第一章第二章的学习我了解到了JVM.JRE与JDK的重要性,并且下载.安装并测试了JD ...
- 20155339 2016-2017 2 《Java程序设计》第2周学习总结
20155339 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 这周学习了课本的第三章,主要内容是JAVA的基础语法,在这章的学习过程中我发现大部分与c语言 ...
- [CF1042D] Petya and Array
题面 题解 这道题目到底叫什么好呢?? 史上最短CDQ分治题 记一个前缀和,然后CDQ分治即可. 代码 #include<cstdio> #include<algorithm> ...
- log4net始终占用日志文件的问题
在appender 下面加 <lockingModel type="log4net.Appender.FileAppender+MinimalLock" />