rem+vw布局的原理与rem的设置技巧
程序员文章站
2022-06-01 20:18:12
...
rem+vw布局的原理
vw为响应式单位，为方便计算：
- 先根据页面总宽度100vw与设计稿的宽度计算出html的font-size为100px,即
calc(100vw / 设计稿宽度 / 100)； - 由于字号会被继承，所以将body的font-size设为默认的16px,即0.16rem;
- 用媒体查询@media设置小于最小宽度时的html的font-size值 以及 大于最大宽度时的html的font-size值，都用px表示。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>html {font-size: calc(100vw / 3.75);}body {font-size: 0.16rem;}@media (max-width:320px){html{font-size: 85px;}}@media (min-width:640px){html{font-size: 170px;}}</style><body><div class="box">PHP中文网</div></body></html>
grid属性
容器属性
-
设置容器为grid布局：
display:grid; -
设置行列数量 （fr为份，自动划分）
设置行 grid-template-rows:repeat(3,1fr)
设置列 grid-template-columns:repeat(3,1fr)
- 间距 gap
用法：gap:行距 列距
- 排列方式：行/列优先（即横排竖排）
grid-auto-flow:row/column
设置隐式网格的行高grid-auto-rows:10em
设置隐式网格的列宽grid-auto-columns:10em
对齐方式：相对容器place-content:垂直方向 水平方向
可选值有（start/end/center/space-between/space-around/space-evenly）
对齐方式：项目相对于网格place-items:垂直方向 水平方向
可选值有（start/end/center）
项目属性
-
跨区间
grid-area: 行始/列始/行止/列止 -
针对单个项目
place-self:垂直方向/水平方向
可选值有（start/center/end） -
实例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;box-sizing: border-box;}body{display: grid;grid-template-rows: 10em minmax(500px,calc(100vh - 20em - 0.6em - 0.6em)) 10em;grid-template-columns: 10em minmax(500px,1fr ) 10em;gap: 0.5em;}header,footer{background-color: chocolate;color: #fff;grid-column: span 3;}main{background-color: cyan;}footer{background-color: darkcyan;color: #fff;}aside{background-color: rgb(105, 155, 247);color: #fff;}</style></head><body><header>HEADER</header><aside class="left">LEFT</aside><main>MAIN</main><aside class="right">RIGHT</aside><footer>FOOTER</footer></body></html>