手机淘宝用JS来动态写meta标签,代码类似这样:
var
metaEl = doc.createElement(
'meta'
);
var
scale = isRetina ? 0.5:1;
metaEl.setAttribute(
'name'
,
'viewport'
);
metaEl.setAttribute(
'content'
,
'initial-scale='
+ scale +
',
maximum-scale='
+ scale +
', minimum-scale='
+ scale +
', user-scalable=no'
);
if
(docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
}
else
{
var
wrap = doc.createElement(
'div'
);
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
总的来说,手机淘宝的flexible方案是综合运用rem和px两种单位+js设置scale和html字体。
完整引用举例:
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>
使用方法
建议对于js做内联处理
,在所有资源加载之前执行这个js。
执行这个js后,会在html
(也就是document.documentElement)上增加一个data-dpr
属性,以及font-size
样式。
之后页面中的元素,都可以用rem单位来设置。html
上的font-size
就是rem的基准像素。
把视觉稿中的px转换成rem
首先,目前视觉稿大小分为640
,750
以及,1125
这三种。
当前方案会把这3类视觉稿分成100份
来看待(为了以后兼容vh,vw单位)。每一份被称为一个单位a。同时,1rem单位认定为10a。拿750的视觉稿举例:
1a = 7.5px
1rem = 75px
因此,对于视觉稿上的元素的尺寸换算,只需要原始px值
除以rem基准px值
即可。例如240px * 120px的元素,最后转换为3.2rem * 1.6rem。
字体不使用rem的方法
字体的大小不推荐用rem作为单位。所以对于字体的设置,仍旧使用px作为单位,并配合用data-dpr
属性来区分不同dpr下的的大小。
例如:
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
手动配置dpr
引入执行js之前,可以通过输出meta标签方式来手动设置dpr。语法如下:
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
其中initial-dpr
会把dpr强制设置为给定的值,maximum-dpr
会比较系统的dpr和给定的dpr,取最小值。注意:这两个参数只能选其一。
手动设置rem基准值的方法
输出如下css样式即可:
html {font-size: 60px!important;}
一些常用APIs
[Number] lib.flexible.dpr
当前页面的dpr值
[Number] lib.flexible.rem
当前页面的rem基准值
[Number|String] lib.flexible.rem2px([Number|String digital])
把rem转换为px
[Number|String] lib.flexible.px2rem([Number|String digital])
把px转换为rem
lib.flexible.refreshRem()
刷新当前页面的rem基准值
栅格系统
需引入makegrid.js
<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/makegrid.js"></script>
使用方法
lib.flexible.makeGrid(params)
- [Object params]
- designWidth - 设计稿宽度
- designUnit - 设计稿最小单位a(以px为单位)
- columnCount - 栅格列数
- columnXUnit - 栅格列宽(以a为单位)
- gutterXUnit - 栅格间距(以a为单位)
- edgeXUnit - 页面左右边距(以a为单位)
- className - 栅格样式的名称(可省略,默认为grid)
通过传入视觉的栅格规范定义,可以输出对应的css样式。
lib.flexible.makeGridMode(modeName)
- [String modeName]
方案还预置了几个默认的栅格规范,分别是750-12
,750-6
,640-12
,640-6
。
利用meta输出栅格样式
<meta content="designWidth=750, desginUnit=6, columnCount=12, columnXUnit=7, gutterXUnit=3, edgeXUnit=4" name="grid" />
或
<meta content="modeName=750-12" name="grid" />
栅格代码举例
<div class="grid">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<div class="grid">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="grid">
<div class="col-3"></div>
<div class="col-4"></div>
<div class="col-5"></div>
</div>
相关推荐
移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外。手淘开发团队经过多年的摸索和实战,总结了一套移动端适配的方案——flexible方案。
其中,`rem`布局作为一种灵活且高效的解决方案,在移动端自适应布局中占据了重要位置。本文将详细介绍两种常见的`rem`布局实现方法:网易的做法和淘宝的做法。 #### 二、基础知识回顾 **1. `rem`单位简介** - `...
flexible和vux组件结合,按照这个脚手架,设计出750px稿子(这个可以商量,webpack里面有配置可以改的),你在布局中直接使用px,webpack会自动转化rem,再根据淘宝的自适应方案达到自适应的效果。 2.vux组件使用的...
在移动端开发中,为了实现响应式布局,"rem+flexible.js"是一个常见的解决方案,尤其适合新手学习。本文将深入探讨rem单位与flexible.js在移动端布局中的应用及其原理。 首先,rem(root em)是CSS3引入的一个相对...
它主要应用于适配不同尺寸屏幕的手机和平板设备,实现页面的自适应布局。flexible.js 是基于"淘宝前端团队"提出的"手淘Flexible方案",该方案利用媒体查询、rem单位以及动态改变html元素的font-size属性,来实现页面...
1. 初始化设备像素比:`flexible.js`首先获取设备的像素比(devicePixelRatio),这是手机屏幕物理像素与CSS像素的比例。 2. 设置基础字体大小:根据设备像素比,`flexible.js`会设置`<html>`元素的`font-size`。...
淘宝作为一个大型电商网站,对用户体验有着极高的要求,尤其是在移动端,能够适应不同尺寸屏幕的页面设计是必不可少的。 在实现移动适配的过程中,Flexible库采用了“设备像素比”(Device Pixel Ratio,简称dpr)...
本主题聚焦于"基于手淘flexible.js的Vue组件",这是一种结合了淘宝团队的手淘flexible.js库与Vue.js技术的实践,旨在为移动端开发提供更好的适配和用户体验。 手淘flexible.js是由淘宝前端团队开发的一个用于移动端...
在当今Web开发领域,Vue.js已成为构建单页应用(SPA)的强大工具,而H5页面则因其跨平台特性而广泛应用于移动端。Vue编写H5页面的方法不仅能够带来开发效率的提升,还能通过现代前端技术实现优秀的用户体验。下面...
5. **移动端自适应方案-lib.flexible** - lib.flexible 是一个广泛应用于移动端Web开发的自适应布局库,由淘宝团队开发并开源。它能够帮助开发者轻松实现响应式设计,确保网站在不同尺寸设备上都能保持良好显示...