一、rem布局
rem是相对于根元素的字体大小单位。 假设html的字体大小为16px,那么1rem = 16px;
一旦根元素html定义的font-size变化,整个页面中运用到的rem都会随之变化。
#1. 100等分法
1. html的font-size设置为100px -- 便于换算
2. body的font-size设置为0.16rem -- 使用rem重置字体大小
3. 通过媒体查询在不同设备下修改html的font-size -- 整个页面中的rem会随之改变
#2. calc视口换算
当前设备尺寸 / 基准尺寸 *100
font-size: calc(100vw / 375*100);
#3. scss函数+js改变html字体
- 使用scss函数是为了便于每一个样式的换算
$base-fontSize:37.5px; //基准值
@function rem($px){
@return $px / $base-fontSize*1rem;
}
- js改变html字体大小是为了解决calc的兼容性问题
var html = document.documentElement;
html.style.fontSize = html.clientWidth / 375 * 37.5 + 'px';
#四、flexible
手机淘宝团队开发的移动端适配插件
data-dpr: 设备像素比
device-width:设备的宽度
width:视口的宽度
initial-scale: 缩放的比例
user-scalable=no 是否允许用户缩放页面 no|yes 0|1
默认以750的设计稿做为基准值
#五、三段式布局
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
- 父容器box需要设置
display:flex;
flex-direction:column
height:100vh 也可以设置100% 但是要注意html,body也要设置
- header、footer高度是一个固定的值
- 中间的容器main
width:100%;
height:100%;
overflow:auto;