码迷,mamicode.com
首页 > 移动开发 > 详细

移动端 rem和flexible

时间:2020-12-19 11:40:30      阅读:2      评论:0      收藏:0      [点我收藏+]

标签:允许   star   height   用户   兼容   cal   flex   alc   rap   

一、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也要设置
 
  1. header、footer高度是一个固定的值
  2. 中间的容器main
    width:100%;
    height:100%;
    overflow:auto;

移动端 rem和flexible

标签:允许   star   height   用户   兼容   cal   flex   alc   rap   

原文地址:https://www.cnblogs.com/yzy521/p/14132276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!