移动端 rem和flexible

一、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>

 

1. 父容器box需要设置

 display:flex;
 flex-direction:column
 height:100vh  也可以设置100%  但是要注意html，body也要设置

 

2. header、footer高度是一个固定的值
3. 中间的容器main

    width:100%;
    height:100%;
    overflow:auto;