一：本文提供两种解决方案 1.终端解决方案（最优，建议选择） 2.web解决方案 导语: iPhone X的出现，一方面对于整个手机行业的发展极具创新领头羊的作用，另一方面也对现有业务的页面适配带来了新的挑战。 对于手Q中的各业务来说，受iPhone X影响的H5页面挺多，应该采取 ...

1.rem 上述代码，便是屏幕适配的整个框架，可以适用手机，平板，电脑。 可以在其中写入自己的代码，以rem为单位（此代码1rem=20px）； 有缩放效果，以px为单位，是绝对值，不会随着屏幕大小的改变，而改变； 以百分比为单位，注意将标签的所有父元素都已百分比为单位，同样 ...

h5 移动端适配方案 设定viewport 打开public\index.html，在html\head结点下加入<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale ...

安全区域？ 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域： 也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。 更详细说明，参考文档 ...

一、相信大家有被iPhone X底部黑色横线支配的恐惧 　　上面我们可以看到，底部的导航栏被一条黑色横线所盖住，那么就很烦。下面我们可以开始进行适配环节 　1、首先我们可以用 JS 判断手机环境是不是 iPhone X 代码如下 2、也可以 CSS 判断 ...

一、前言 昨天唠叨了哈没用的，今天说点有用的把。先说一下响应式布局吧，我一直认为响应式布局的分项目，一下布局简单得项目做响应式还是可以可以得。例如博客、后台管理系统等。但是有些会认为 ...

《使用Flexible实现手淘H5页面的终端适配》：https://github.com/amfe/article/issues/17 《再聊移动端页面的适配》：https://blog.csdn.net/qq_21729177/article/details/79466951 《如何在Vue ...

前言 移动互联网发展至今，各种移动设备应运而生，但它们的物理分辨率可以说是五花八门，一般情况UI会为我们提供375尺寸的设计稿，所以为了让H5页面能够在这些不同的设备上尽量表现的一致，前端工程师就不得不对页面进行移动端适配了。 「如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众 ...