Java教程

Javascript 淘宝移动端适配

本文主要是介绍Javascript 淘宝移动端适配,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

淘宝移动端适配

像素

物理像素就是屏幕最小发光点,RGB红绿蓝组成一个发光点即一个物理像素

PC上,一个逻辑像素(CSS)像素,等于一个物理像素
但是在移动端的高分屏上,一倍屏下一个物理像素等于一个逻辑像素

二倍屏幕下。一个逻辑像素等于二倍物理像素(四个物理像素点)
以此类推

当设置不缩放。逻辑像素等于物理像素,1rem等于逻辑(CSS,手机宽度)像素/10

ip3gs ip4s ip6p ip12
几倍屏 1 2 3 3
缩放倍数 1 1 1 1
宽度rem 1 1 1 1
物理像素 320px 640px 1242px 1170px
逻辑像素 320px 320px 414px 390px
逻辑(CSS,手机宽度)像素
1rem等于
32px 32px 41.4px ? 39px

image
image
image

不设置缩放数值,通过flexible.js计算缩放,1rem等于物理像素/10

假设不缩放,缩放等于1,ip4s的10rem=640px,320的屏幕肯定放不下,所选择缩放

对比1倍,2倍,3倍屏幕效果,分别为Iphone3GS,Iphone4S,Iphone6P
屏幕宽度分为10份,每份1rem,每份为物理像素的10分之一 == 物理像素/10 == HTML的FontSize

ip3gs ip4s ip6p ip12
几倍屏 1 2 3 3
宽度rem 1 1 1 1
物理像素 320px 640px 1242px 1170px
逻辑像素 320px 320px 414px 390px
逻辑(CSS,手机宽度)像素
1rem等于
32px 64px 124.2px ? 39px

image
image
image

这篇关于Javascript 淘宝移动端适配的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!