什么是刘海屏手机

刘海屏手机指的是手机屏幕正上方由于追求极致边框而采用的一种手机解决方案，因形似女孩的刘海儿而得名。

刘海屏手机要归功于苹果公司，2017年9月，正式发布的苹果iPhone X，其特殊的前脸设计一度让不少消费者感到不适应，尤其是强迫症患者——这样的设计被戏称为“刘海屏”。

在2018年，不管是中国厂商还是外国厂商，大家都在跟风做刘海屏手机。

扩展资料

大多数Android厂商的刘海屏只是对Essential / 夏普的简单模仿，当中只容纳着前置摄像头、听筒、距离传感器和LED指示灯。

他们之所以会选择跟风，更多的是从美学而非功能性的角度出发。

苹果的刘海屏解决方案可以说是目前最佳的——他们并不把这个设计选择看作是屏幕的缺口，而是被显示屏切入的边框。

未来的真全面屏会使用了可升降的机械结构来容纳摄像头。

在需要使用前置摄像头时，手机顶部的机械结构就会即可升起。而在平时，你是看不到前置摄像头的存在的。

参考资料：

 百度百科－刘海屏

手机刘海指的是手机屏幕正上方由于追求极致边框而采用的一种手机解决方案。因形似刘海儿而得名。

刘海屏要归功于苹果公司，2017年9月，正式发布的苹果iPhoneX，其特殊的前脸设计一度让不少消费者感到不适应，尤其是强迫症患者--这样的设计被戏称为“刘海屏”。有用户表示：如果乔布斯还在，这种事情绝对不会发生。但就是这么看起来有些奇怪，甚至微微有点“丑”的设计，凭着"DesignedbyApple"，出现了让人哭笑不得的一幕--在2018年的世界移动通信大会上，虽没有iPhoneX参展，却似乎处处有苹果的影子。在2018年，不管是中国厂商还是外国厂商，大家都在跟风做刘海屏手机。

领先于谷歌安卓系统。谷歌AndroidP预览版也显示加入了“刘海屏”的优化设计。在2018年将会有大批安卓手机会采用“刘海屏”设计。除了“刘海屏”，仿造Animoji动画表情、AR功能、背部指纹识别、面部识别等功能也将陆续出现在2018年发布的安卓机型上。

对于需要在移动端展示的页面来说，由于移动设备各种各样，展现效果也就有了很大的不同，所以做移动端适配是个费劲但是又不得不做的事情。那么我们来说一下如何去应对这种情况。

对于移动端适配，要从2个角度去考虑：

第一个就是需要根据分辨率不同自适应页面大小

第二个是对于刘海屏的特殊处理

所以我们需要使用2套方案来完成移动端的适配

网上有大量的文章来讲分辨率自适应方案，比如rem计算font-size字体大小来作为单位进行像素的换算，比如使用css3新的语法 vw vh 等等百分比单位来计算，等等。相信如果一个新手来看这一堆东西，估计会蒙半天，特别是rem的计算方式，太过繁杂。

根据我花费了大量时间之后总结出来的经验，我最终确定了一个方案来实现。我觉得这个是目前还算简便的方式，所以记录在这里。那就是 ----- 利用scss函数方式 结合 vw vh 百分比显示

通常我们会拿到一个UI设计稿，UI设计稿上会有设计时屏幕的宽高（如果没有UI稿就自己确定一个长宽就可以了）

理解起来非常简单：就2步

如此设置，不管在小屏，大屏，手机，平板，pc， 都会按比例缩放显示元素了

关于刘海屏，等异形屏，我的首要建议就是对于能够从UI设计上就能预留出刘海高度的，最好能直接预留出高度设计。这样就不需要做异形屏幕的适配。

正常来说，我们的页面会分为以下两种情况

对于其中参数不明白的，可以参考其他教程中的解释，在此我就不再赘述了，比如在文章底部列出的参考文章。

这样就实现了屏幕的适配

结语：屏幕适配的各种兼容情况层出不穷，我这套方案应该也会有不兼容的情况出现，所以如果有更好的解决方案欢迎大家留言。对于一些 constant env calc safe-area-inset-bottom 等等这些语法不熟悉的话，大家可以去搜索下，一搜就有。希望这套方案足够简洁明了，能够帮助到一些想快速实现的朋友。

感谢其他作者宝贵的经验和参考：

>

以上就是关于什么是刘海屏手机全部的内容，包括:什么是刘海屏手机、手机刘海什么意思、vue react 移动端适配 viewpoint @media iphonex刘海屏适配等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！