移动端rem设置,自动更改html
来源:互联网 发布:软件开发难吗 编辑:程序博客网 时间:2024/05/09 23:47
移动端rem设置,自动更改html<font-size>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
加入这么一段js,就可以根据屏幕的宽度动态改变font-size
根据这一句 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; 可知
iphone4宽度是320px,那么font-size就是20px, 100px就是5rem
iphone6宽度是375px,那么font-size就是23.4375px,100px就是4.267rem
包治红米手机 小米手机。 用媒体查询 @media有点坑。 有的不支持所以强制通过一段js根据屏幕的宽度动态改变根的html
阅读全文
0 0
- 移动端rem设置,自动更改html
- 移动端rem设置
- 移动端设置html的font-size从而设置rem的大小
- 移动端响应rem dpr viewport设置
- 移动端rem布局js设置
- 自使用移动端rem适配--并且vscode-px自动转化成rem
- 移动端自适应rem
- 移动端rem布局
- 移动端 rem
- 移动端 单位 rem
- 移动端rem布局
- 移动端 rem 适配
- 移动端rem单位
- 移动端rem适配
- 移动端 rem 处理
- 移动端rem布局
- 移动端-rem使用
- 移动端rem 解决方案
- appium+ios 指定页面向左向右向上向下滑动多少:mobile:dragFromToForDuration
- bootstrap模态框的详细用法
- 如何设置输入框 input 中 placeholder的字体颜色、字号
- 通过ip地址实现城市定位
- iOS11-&-iPhone-X-适配之路
- 移动端rem设置,自动更改html
- Android开源库集合(控件)
- 最全正则匹配
- Linux下部署 tomcat服务器
- 阿里巴巴Java开发手册—终极版
- Web开发之浅谈HTTP中Get与Post的区别
- 自己动手写工作流
- 一张图看懂 FastCGI
- MYSQL存储经纬度使用什么数据类型