cxz

问题iphoneX底部会留白解决1、首先，给viewport meta 标签添加一个扩展viewport-fit，用于设置网页在手机的可视窗口的布局方式　　属性值有：contain 视窗包含网页　　　　　　　cover 网页覆盖视窗　　　　　　　auto 默认值，同contain效果注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤2、env() 和 constant()

前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 比如一些需要贴在底部的按钮，和呼起的tabBar和底部弹出框，在iphoneX上就会出现被小黑条遮挡内容，或者页面上出现白色空隙的问题。处理前后截图如下所示基本了解viewport-fitiOS11 新增特性，苹果公司为了适配

前言retina 屏下 1px 问题是个常谈的问题，相比较普通屏，retina 屏的 1px 线会显得比较粗，设计美感欠缺；在视觉设计师眼里的 1px 是指设备像素 1px，而如果我们直接写 css 的大小 1px，那在 dpr = 2 时，则等于 2px 设备像素，dpr = 3 时，等于 3px 设备像素。所以对于要求处理 1px 的场景，我们要进行特殊处理。实现1、transform: scale(0.5)可以使用 transform: scale(0.5) 进行 X、Y 轴的缩放，如下示例所

使用动态设置html font-size的方式 来适配rem是相对于HTML的根元素，em相对于自身元素的字体大小。VW,VH 屏幕宽度高度的高分比//按照宽度375图算， 1rem = 1px;(function (win, doc) { function changeSize() { doc.documentElement.style.fontSize = doc.documentElement.clientWidth / 375 + 'px'; } changeSiz

1. iponex底部有白边，且出现10px左右的自动下滚如下图所示在浏览器调试的时候是没有滚动条以及最下面的白边的，解决:给meta标签中的一个viewport添加一个 viewport-fit=cover" 属性即可<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=co