思路
- rem:根元素的font-size。 (r表示root )。
- 所有手机显示的界面都是一样的,只是大小不同。
- 用JS把html的
font-size
与page-width
关联起来。比如:让font-size是pageWidth的1/10。 - 这样用
rem
定义元素宽度时,可随不同手机的宽度变化而变化 - 注意,可以与其它单位混用,不要每个每个地方都要用rem。比如,只想
border
为1px,就1px写死。
工具SCSS
SCSS里面的px2rem函数,实现 px 自动变 rem。
例子:
在 scss 文件里添加以下代码
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度,你要根据设计稿的宽度填写。
.child{
width: px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
阿里团队方案 lib-flexible
手机端页面自适应解决方案—rem布局进阶版(附源码示例)
lib-flexible
思路
- 如果页面的宽度超过了640px,那么页面中html的
font-size
恒为100px,否则,页面中html的font-size
的大小为:100 * (当前页面宽度 / 640)。 - 640px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。
- font-size设为100px,方便换算。
- 改进
font-size
,设置 html 的font-size
为50 * dpr
(dpr为设备像素比),以达到高清效果。
'use strict';
/**
* @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;
* @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
* @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
*/
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
const _baseFontSize = baseFontSize || 100;
const _fontscale = fontscale || 1;
const doc = win.document;
const ua = navigator.userAgent;
const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
let dpr = win.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
// 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
dpr = 1;
}
const scale = normal ? 1 : 1 / dpr;
let metaEl = doc.querySelector('meta[name="viewport"]');
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
doc.head.appendChild(metaEl);
}
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
作者:_minooo_
链接:https://www.jianshu.com/p/985d26b40199
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。