博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端设置-----rem
阅读量:4556 次
发布时间:2019-06-08

本文共 965 字,大约阅读时间需要 3 分钟。

对于现在不同尺寸的移动端屏幕,如果设置px来说实在有点影响用户体验,在小屏幕上太大,大屏幕上太小,不能实现响应式,所以就引进了rem的概念。

rem是相对于根元素<html>

在我的项目中就是用这样的一段js代码。

将上面代码拷在html的head里,意思是可视区域的宽度等于设备的宽带,禁止缩放,最大缩放为1,最小也是1,默认比例是1. 

1 (function (doc, win) { 2     var docEl = doc.documentElement, 3         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4         recalc = function () { 5             var clientWidth = docEl.clientWidth; 6             if (!clientWidth) return; 7             docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; 8         }; 9  10     // Abort if browser does not support addEventListener11     if (!doc.addEventListener) return;12     win.addEventListener(resizeEvt, recalc, false);13     doc.addEventListener('DOMContentLoaded', recalc, false);14 })(document, window);

 当设计给我psd时,测量文字为40px,html使用rem值40px/100 = 0.4rem。

rem其实不单只能使用在文字的单位,还可以用于height,width,padding,marigin,line-height等的单位。

转载于:https://www.cnblogs.com/matthew9298-Begin20160224/p/5212114.html

你可能感兴趣的文章
hibernate在使用getCurrentSession时提示no session found for current thread
查看>>
【Luogu1471】方差(线段树)
查看>>
【agc028E】High Elements(动态规划,线段树,贪心)
查看>>
DEV中svg图标的使用
查看>>
Codefroces Gym101572 I.Import Spaghetti-有向图跑最小环输出路径(Floyd)
查看>>
有关位运算的操作+二进制状态压缩
查看>>
Eclipse插件 -- 阿里巴巴扫描编码规插件
查看>>
(1.1)学习笔记之mysql体系结构(内存、进程、线程)
查看>>
markdown测试
查看>>
Java-Maven-Runoob:Maven 依赖管理
查看>>
杂项-Log:log4net
查看>>
杂项-Java:EL表达式
查看>>
tarroni music
查看>>
unity 使用RotateAround的使用注意
查看>>
[SDOI2009]HH的项链
查看>>
CodeFirst模式,容易引发数据迁移问题(不建议使用)
查看>>
jquery的colorbox关闭并传递数据到父窗
查看>>
使用Nginx、Keepalived构建文艺负载均衡
查看>>
phpmyadmin 开放远程登录的权限
查看>>
linux安装gcc和gcc-c++
查看>>