移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible
其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多。
不管哪种方法,都有其自己的优势和劣势。
为什么推荐使用Flexible库来做H5页面的终端设备适配呢? 原理 简单易懂 源码疑问
主要因为这个库在手淘已经使用了近一年,而且已达到了较为稳定的状态。
除此之外,你不需要考虑如何对元素进行折算,可以根据对应的视觉稿,直接切入。
该方案 会 自动根据你的屏幕大小配置好 根节点的 font-size 大小
另外会改变 initial-scale , 如果是3倍retina屏, 值变成 1/3, viewPort被放大为3倍
书写的时候可以用 直接写 px, cssrem插件会帮你转成rem, 这样就不会影响开发效率
对应@3dpr 的图, 可以用 data-dpr 判断
[data-dpr="3"] & {
background-image: url("../img/@3x/android.png?v=@@version");
}
对于字体:
@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问题
https://github.com/amfe/article/issues/17
http://www.cnblogs.com/lyzg/p/5058356.html
移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible的更多相关文章
- dpr——设备像素比(device pixel ratio)
设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...
- Device Pixel Ratio & Media Queries
一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...
- 移动端,多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
- 真的,移动端尺寸自适应与dpr无关
做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解. 1. 什么是尺寸自适应 首先标题说的自适应, ...
- 从原理到方案,一步步讲解web移动端实现自适应等比缩放
前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增 ...
- vue+vue-cli+淘宝lib-flexible做移动端自适应
总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...
- 原生js移动端字体自适应方案
自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...
- 移动端rem自适应方案
一般设计师给我们的设计稿尺寸都为750*1340 .. 网易,淘宝移动端首页上html元素的font-size 目前就先说一下网易的做法 引入下面这段js,用于计算动态的font-size (func ...
- 妈妈再也不用担心我的移动端了:网易和淘宝的rem方案剖析
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
随机推荐
- 返回json格式数据乱码
本文为博主原创,未经允许不得转载: 原本返回json格式数据的代码: @ResponseBody @RequestMapping(value = "getListByTime", ...
- 机器学习-数据可视化神器matplotlib学习之路(四)
今天画一下3D图像,首先的另外引用一个包 from mpl_toolkits.mplot3d import Axes3D,接下来画一个球体,首先来看看球体的参数方程吧 (0≤θ≤2π,0≤φ≤π) 然 ...
- Quartz.NET教程:(01) 使用Quartz
使用调度器 (scheduler) 之前要先用 ISchedulerFactory 的一个实现来实例化调度器(scheduler).一旦调度器实例化完成,则它可以被启动.置于备用模式或者关闭.需要注意 ...
- Linux内核的五大模块
Linux内核的五大模块 (转自)https://blog.csdn.net/huangjingbin/article/details/19396235 Linux内核的五大模块 1.进程调度模块 2 ...
- Phpstorm配置scss不生成缓存
--no-cache 加上这个,就不会生成 .sass-cache 文件夹了.
- 引用类(RC)
R 中还有一种具有引用语义的类系统,它更像其他面向对象编程语言中的类系统.首先,为了定义一个引用类( reference class , RC ),我们要给 setRefClass( )一个类定义.不 ...
- VC++异常处理
1.测试代码: #include <stdio.h> #include <windows.h> void main() { __try { DWORD dwDemonObj = ...
- STL__网上资料
1. http://bbs.csdn.net/topics/370029802 #include <iostream> #include <limits> #include & ...
- 会话技术及jsp概述
一.会话技术 1.概念:在一次会话中共享数据,在web中指,浏览器和服务器的一次通信.包含多次请求,和多次响应. 可以在一次会话的多次请求中共享数据. 2.客户端会话技术:Cookie 将数据保存在客 ...
- HDU2017新生赛 友好整数
思路: 很简单的一个状态压缩,比赛时没想出来. 最多只有2^10个状态,n^2暴力一下也就1e6. 代码: #include<bits/stdc++.h> using namespace ...