yujin0213的博客

前言 对于做移动端开发的同学来说，rem这个单位并不陌生。通常我们做移动端适配，主流的方案大致有两种 淘宝flexible.js 计算设备像素比，dpr=物理像素/css像素 根据设备像素比，将页面宽乘以设备像素比，然后去计算rem，这样页面所有元素都会是正常的2倍 然后通过meta标签的viewport对页面进行缩放，使得页面恢复正常 根html的font-size值 = 屏幕宽度*设备像素比/10 以iphone6 375为例，1rem = 375 * 2 / 10 = 75px 然后在项目里写

前言 近期在做落地页优化项目中，针对iOS多种新机型（iPhone X之后的刘海屏）适配，有一些坑点，及适配相关的心得，在此记录一下 问题 落地页首屏页面要求铺满全屏，背景图撑满。之前设计稿都是750 * 1134，但是为了适配iPhone X（分辨率375 * 812）类的刘海屏手机，UI多出了一份750 * 1642的设计稿，那么页面首屏的高度需要是屏幕高度，背景图要按两套背景图来，而由于该项目里区分国家，所以一共是2套*3国，6套背景图 解决方案 方案一 首屏dom高度设置为100vh .firs