内容 Content
- Lorem ipsum dolor sit.
- Aperiam beatae odit consectetur?
- Consectetur amet repellat error?
- Cum, delectus deserunt? Magni.
- Atque illum reiciendis ut.
.container { width: 100%; max-width: 1920px; margin: 0 auto; padding: 1rem; }
. 根据所在容器调整大小
max-content: Lorem ipsum dolor sit amet.
min-content: Lorem ipsum dolor sit amet.
float: left;
text-indent: 2em;
html{ font-size: 62.5%; }
.container { width: min(800px, 90%); margin: 0 auto; }
.container { width: 90%; max-width: 800px; margin: 0 auto; }
item | desc |
---|---|
sm | 40rem(640px) |
md | 48rem(768px) |
lg | 64rem(1024px) |
xl | 80rem(1280px) |
2xl | 96rem(1536px) |
@media screen and (max-width:768px) { html { font-size: 50%; } }
html { //font-size: 10px; font-size: 62.5%; scroll-behavior: smooth; }
function rem() { let dw = document.documentElement.clientWidth || window.innerWidth if (dw >= 750) { dw = 750 } if (dw <= 320) { dw = 320 } console.log('dw', dw); // 1rem=100px document.documentElement.style.fontSize = (dw / 7.5) + 'px' } rem() window.onresize = function () { rem() }