该布局于 2017年8月9日被2.0版本取代
实现原理 假设(ui稿750px宽)
scale = 1/window.devicepixelratio
font-size = 实际屏幕宽度 / 10;
(设计稿dom宽度)px
px2rem插件
转换为 -> 实际remflexible 2.x:
实现原理
个人很喜欢的布局方案
实现原理 假设(ui稿750px宽)
font-size = 100px;
作为参照,总宽度 = 7.5rem
设计稿dom对应px / 100 = 实际rem
(计算起来很方便)屏幕宽度百分比 缩放 font-size的值
1px/750px ≈ 0.1333333%
font-size = 0.1333333% * 100 = 13.33333vw
顾名思义,将px转换为vw、vh、vmin、vmax
{ viewportwidth: 750, viewportheight: 1334, unitprecision: 3, viewportunit: 'vw', selectorblacklist: ['.ignore', '.hairlines'], minpixelvalue: 1, mediaquery: false }
如对本文有疑问, 点击进行留言回复!!
深入理解CSS background-blend-mode的作用机制
网友评论