移动端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 设置,如果根目 ...
随机推荐
- iframe空白
优酷网页上复制的通用代码用来播放视频,浏览器和谷歌模拟器正常,但是发布后手机上打开一片空白,一直以为是苹果手机不支持iframe,最后发现是由于iframe播放链接是http的,而我们网页是https ...
- CF451E Devu and Flowers(组合数）
题目描述 Devu想用花去装饰他的花园,他已经购买了n个箱子,第i个箱子有fi朵花,在同一个的箱子里的所有花是同种颜色的(所以它们没有任何其他特征).另外,不存在两个箱子中的花是相同颜色的. 现在De ...
- [笔记] 升級到 Delphi 10.2 Tokyo 笔记
升級到 Delphi 10.2 Tokyo 笔记: 更新 Xcode 8.3 & iOS 10.3 测试: macOS 没问题(可 Debug) iOS Simulator 没问题(可 Deb ...
- DELPHI DOUBLE不解之迷
procedure TForm1.cmd2Click(Sender: TObject);var str1, str2: string; LValue1: Double; LValue2: Extend ...
- RuntimeError: Cannot run in multiple processes: IOLoop instance has already been initialized. You cannot call IOLoop.instance() before calling start_processes()
解决方法: settings中的debug改为false,或者注释掉 参照: https://stackoverflow.com/questions/32521122/cannot-run-in-mu ...
- python从Excel中提取邮箱
从各个城市的律师协会去爬取的律师的招聘信息,可是邮箱在招聘简介里面,所有需要写个脚本去提取邮箱 import pandas as pd import re regex = r"([-_a-z ...
- 网站sql注入漏洞修复方案之metinfo 6.1.0系列
近日,我们SINE安全对metinfo进行网站安全检测发现,metinfo米拓建站系统存在高危的sql注入漏洞,攻击者可以利用该漏洞对网站的代码进行sql注入攻击,伪造恶意的sql非法语句,对网站的数 ...
- Go 学习之路：异常处理defer，panic，recover
Go没有像Java那样的异常机制,它不能抛出异常.因为设计者们认为,将异常与控制结构混在一起容易使得代码变得混乱.于是乎引入Exception处理: defer,panic,recover; 简单描述 ...
- Python3爬虫（十八） Scrapy框架（二）
对Scrapy框架(一)的补充 Infi-chu: http://www.cnblogs.com/Infi-chu/ Scrapy优点: 提供了内置的 HTTP 缓存 ,以加速本地开发 . ...
- 数据结构与算法之排序（2）选择排序 ——in dart
选择排序的算法复杂度与冒泡排序类似,其比较的时间复杂度仍然为O(N2),但减少了交换次数,交换的复杂度为O(N),相对冒泡排序提升很多.算法的核心思想是每次选出一个最小的,然后与本轮循环中的第一个进行 ...