移动端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 设置,如果根目 ...
随机推荐
- element UI 饿了么 UI 分页 按钮不显示的问题
https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的 深坑 element UI 的 按钮 不显示的深坑 <e ...
- echarts 地图 免费离线js,json包分享
最近,项目中需要用到地图,由于项目的特殊性,只能使用内网获取数据. 然而,echarts官网上的离线地图包(http://echarts.baidu.com/download-map.html)早在一 ...
- Node.js http.createServer 简单服务配置
基本实现: var http = require("http"); var server = http.createServer(function (req, res) { if ...
- php实现银联支付
银联支付用的还是比较少的,而且开发中也没接触多少,不过因为工作项目用银联支付能降低费率,所以还是接入了银联支付.本文支付为银联网关和WAP支付接口. 官方网站SDK&DEMO:https:// ...
- 树莓3B+_中文支持安装输入法
参考: https://www.cnblogs.com/collisionzhang/p/7413349.html 莓派默认是采用英文字库的,而且系统里没有预装中文字库,所以即使你在locale中改成 ...
- C# typeof() 和 GetType()区是什么
1.typeof(x)中的x,必须是具体的类名.类型名称等,不可以是变量名称. 2.GetType()方法继承自Object,所以C#中任何对象都具有GetType()方法,它的作用和typeof() ...
- 20155220 吴思其 2016-2017《java程序设计》第一周总结
对第一章和第二章的学习 通过了前两章的学习,我了解到了java的由来以及JVM/JRE/JDK三大平台 JDK JDK 是 Java 语言的软件开发工具包. JDK是整个JAVA的核心,包括了Java ...
- c++ 创建单项链表
建立单向链表 头指针Head 插入结点 //建立头结点 Head Head=p= malloc(sizeof( struct stu_data)); // memset(stu,,sizeof( st ...
- 【BZOJ4008】[HNOI2015]亚瑟王
[BZOJ4008][HNOI2015]亚瑟王 题面 bzoj 洛谷 题解 由期望的线性性 可以知道,把所有牌打出的概率乘上它的伤害加起来就是答案 记第$i$张牌打出的概率为$fp[i]$ 则 $$ ...
- Mac Eclipse快捷键
Command + O:显示大纲Command + 1:快速修复Command + D:删除当前行Command + Option + ↓:复制当前行到下一行Command + Option + ↑: ...