rem布局 学习rem 先学em
1.em 是指父元素的字体大小
2.rem 是指html的字体大小
3.rem 布局是用 媒体查询来改变(js改变)HTML的字体大小来实现自适应
rem 的优点就是可以通过修改html里面的文字大小来改变页面中元素的控制大小
rem其实不是布局 是单位
rem适配方案原理 (动态更改html的字体大小)
布局方式有两种
- rem+媒体查询
- js+rem
rem+媒体查询 (动态设置方法)
- 假设我们的设计稿是750
- 假设我们把整个屏幕划分为15份(划分的份数可以是10或者20)
- 每一份作为HTML字体大小,这里是50px 750/15= 50
- 那么在320px设备的时候,字体大小是320/15=31.33px
- 用我们页面元素的大小除以不同的HTML字体大小会发现他们比例是相同的(比如要个100px的盒子就是 100px/50字体=2rem,用100px/31.33字体=3.1rem 多是100px的盒子)
- 比如我们以750为标准设计稿
- 一个100*100像素的页面元素在750屏幕下,就是100/50 转换为rem 是 2rem*2rem 比例是 1比1
- 320屏幕下,html字体大小为21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是 宽和高的比例还是 1比1
- 但是已经能实现不同屏幕下,页面元素盒子等比例缩放的效果
元素大小取值方法、
- 最后公式:页面元素的rem值 = 页面元素值 px / (屏幕宽度 / 划分的份数)也就是HTML字体大小
- 屏幕宽度 / 划分的份数 就是 html font-size的大小
- 或者:页面元素的rem值 = 页面元素值px / html font-size 的大小
方法
rem + 媒体查询 实现元素动态大小变化
* {
margin: 0px;
padding: 0px;
}
@media screen and (min-width: 320px) {
<!-- <= -->
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
<!-- <= -->
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: 0.5rem;
color: #fff;
text-align: center;
line-height: 1rem;
background-color: pink;
}
js+rem
- 比较简单(因为用了js)
- 我们只用设置 页面元素的px值 / 75 就行 (因为js算好了 HTML的字体大小 但是他是除10的)
js代码
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
小推荐
vscode cssrem插件 px转换rem 就不用算了 但要改一下vscode编辑器的字体大小 改为页面的字体大小就行