标签：允许 star height 用户 兼容 cal flex alc rap
rem是相对于根元素的字体大小单位。 假设html的字体大小为16px,那么1rem = 16px; 一旦根元素html定义的font-size变化,整个页面中运用到的rem都会随之变化。
1. html的font-size设置为100px -- 便于换算
2. body的font-size设置为0.16rem -- 使用rem重置字体大小
3. 通过媒体查询在不同设备下修改html的font-size -- 整个页面中的rem会随之改变
当前设备尺寸 / 基准尺寸 *100
font-size: calc(100vw / 375*100);
$base-fontSize:37.5px; //基准值
@function rem($px){
@return $px / $base-fontSize*1rem;
}
var html = document.documentElement;
html.style.fontSize = html.clientWidth / 375 * 37.5 + ‘px‘;
手机淘宝团队开发的移动端适配插件
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>
display:flex;
flex-direction:column
height:100vh 也可以设置100% 但是要注意html，body也要设置
width:100%;
height:100%;
overflow:auto;标签：允许 star height 用户 兼容 cal flex alc rap
原文地址：https://www.cnblogs.com/yzy521/p/14132276.html
