Rem布局原理
来源:互联网 发布:蓝凌软件下载 编辑:程序博客网 时间:2024/06/07 10:57
Rem布局原理
rem布局的本质是什么?这是我问过很多人的一个问题,但得到的回答都差强人意。
其实rem布局的本质是等比缩放,一般是基于宽度,试想一下如果UE图能够等比缩放,那该多么美好啊
假设我们将屏幕宽度平均分成100份,每一份的宽度用x表示,x = 屏幕宽度 / 100,如果将x作为单位,x前面的数值就代表屏幕宽度的百分比
p {width: 50x} /* 屏幕宽度的50% */
如果想要页面元素随着屏幕宽度等比变化,我们需要上面的x单位,不幸的是css中并没有这样的单位,幸运的是在css中有rem,通过rem这个桥梁,可以实现神奇的x
通过上面对rem的介绍,可以发现,如果子元素设置rem单位的属性,通过更改html元素的字体大小,就可以让子元素实际大小发生变化
html {font-size: 16px}p {width: 2rem} /* 32px*/html {font-size: 32px}p {width: 2rem} /*64px*/
如果让html元素字体的大小,恒等于屏幕宽度的1/100,那1rem和1x就等价了
html {fons-size: width / 100}p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */
如何让html字体大小一直等于屏幕宽度的百分之一呢? 可以通过js来设置,一般需要在页面dom ready、resize和屏幕旋转中设置
document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';
阅读全文
0 0
- Rem布局原理
- Rem布局的原理解析
- rem布局
- rem布局
- rem布局
- 移动端页面开发适配 rem布局原理
- 关于rem布局
- rem 响应式布局
- 简单说说rem布局
- 移动端rem布局
- rem布局实现自适应
- 移动布局之rem
- 移动端rem布局
- rem自适应布局
- 基于rem布局
- 手机端适配-rem布局
- 移动布局rem
- 移动端rem布局
- 多线程练习题目
- M
- jfinal VS spring mvc
- 网络编程_进程基础
- 02、人人都会设计模式:单例模式--SingleTon
- Rem布局原理
- http get和post的区别
- 深入理解JAVA虚拟机--运行时数据区域
- 一些网址记录
- 素数筛
- 不负年华
- 字符串操作函数
- Linux下开发-alarm
- NOIP2003 传染病控制 【搜索 + 卡时】