挪动端适配计划
引入flexible.js
在
*.html的<head>标签中引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
flexible.js会做以下几件事：
-
给
*.html增加内联样式表- 只是reset一些款式
-
给
<html>设置[data-dpr=""]属性、font-size款式[data-dpr=""]属性的作用：通过属性选择器，设置不同分辨率下的款式font-size:的作用：rem单位的基准尺寸
- 监听
resize、pageshow事件来从新设置html.style.fontSize - 设置
body.style.fontSize -
定义window.lib.flexible
window.lib.flexible = { dpr: number, refreshRem: function, rem2px: function, px2rem: function }
Note：HTML中无需设置<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">，否则，不论设施是多少的dpr，都会强制认为其dpr是你设置的值。
Note：在Flexible中，只对iOS设施进行dpr的判断，对于Android系列，始终认为其dpr为1
通过scss定义px2rem的转换
@function px2em($px, $base-font-size: 16px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2em($px + 0px); // That may fail.
} @else if (unit($px) == em) {
@return $px;
}
@return ($px / $base-font-size) * 1em;
}文本字号不倡议应用rem
咱们心愿文本在不同
dpr屏幕下文本字号雷同咱们心愿在大屏手机上看到更多文本
不心愿呈现13px和15px这样的奇葩尺寸
解决方案
文本还是应用px作为单位，只不过应用[data-dpr]属性来辨别不同dpr下的文本字号大小
// dpr === 1， 设计图尺寸375 * 667为例
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
// dpr === 2， 设计图尺寸750 * 1135为例
@mixin font-dpr($font-size){
font-size: $font-size / 2;
[data-dpr="2"] & {
font-size: $font-size;
}
[data-dpr="3"] & {
font-size: $font-size;
}
}@include font-dpr(16px);补充知识点
flexible.js应用document.readyState API获取document的加载状态
document.addEventListener('readystatechange', event => {
if (event.target.readyState === 'interactive') {
// 等同于DOMContentLoaded 事件
}
else if (event.target.readyState === 'complete') {
// 示意 load 状态的事件行将被触发。
// 等同于loaded
}
});参考文档
- Flexible官网文档
viewport的介绍1viewport的介绍2- iphone12适配
发表回复