华为5G折叠屏幕的发布，迎来新的一个设备——移动端的折叠设备华为Max;华为Max设备分辨率有以下几种8.0，6.8，6.38，这三种场景下页面展示都是不一样的表现，需要我们在开发中注意监听屏幕变化，来动态加载我们的页面，更换场景；华为官网展示了华为Max的多屏幕操作，从前端而言：这需要我们做好不同屏幕下业务呈现的多样性，以及交互的流畅性；5G的来领，数据传输极大提升，视频下载速度会提高，html
转载
2023-07-15 19:36:46
670阅读
特别注意：/static/img/back.png tips：防止弹窗遮罩时页面可滚动，在弹窗的外层view标签加上 @touchmove.stop.prevent="" 1、关于自定义导航栏中的刘海屏适配问题：官方提供了一个CSS变量可以直接引用：var(--status-bar-height)该变量自动匹配设备平台状态栏高度此变量可以用calc() 加上其他单位数值来使用具体参数和说
转载
2024-06-09 10:48:59
828阅读
随着折叠屏越来越火，作为一个做过好几年手机APP的设计师，我内心隐隐有些不安。如果折叠屏手机真的普及了，恐怕会给UI和交互设计带来很大的变化。到时候，APP都要补充很多适配规则，甚至可能需要重新设计布局架构，因为做不做折叠屏的适配，对体验和视觉效果的影响真的很明显。例如：下图就是Google Due为折叠屏做适配的真实案例：
做好适配后，折叠屏看起来酷炫，优势一览无余。如果不做适配，折叠
转载
2023-12-16 18:45:09
177阅读
CSS技巧
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行?
2. margin加倍的问题?设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inlin
转载
2024-08-16 17:17:41
51阅读
一、viewpoint缩放方案原理：在写CSS时完全按照设计稿来（如750px设计稿），页面开发好后在head标签内加上：<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >代码：<script>
const width = 750
const adap
转载
2024-01-30 03:43:02
233阅读
CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。用CSS实现真的很简单很简单，下面我们来看一下第一种方法具体的代码：HTML代码： 1
转载
2024-03-21 15:35:59
326阅读
关于手机的屏幕设计，从用户体验角度出发的话当然是屏占比越高越好，所以在2017年全面屏手机开始爆发，几乎每一家手机厂商都发布了全面屏手机，但是这些依然有着“额头”和“下巴”的全面屏手机显然还不是设计上的极限，其实手机的屏占比还能够更高一点，所以异形全面屏出现了，而且异形全面屏会是2018年手机厂商对于屏幕设计的一个主流趋势。在进入3月以后，OPPO率先公布了其将要发布的下一款产品的海报，这款产品被
转载
2023-11-17 20:47:56
88阅读
# Android折叠屏手机适配指南
随着科技的飞速发展，折叠屏手机正逐渐走入人们的日常生活。这类设备不仅具备传统智能手机的功能，还因其独特的屏幕设计，提供了更为宽广的显示空间。因此，开发者在Android应用开发中，需要考虑如何合理适配折叠屏手机，以提升用户体验。本文将为您介绍折叠屏手机适配的基本要点，并提供相关代码示例。
## 理解折叠屏手机
折叠屏手机的特点在于其能够根据用户需要展开或
# Swift 折叠屏手机适配指南
随着折叠屏手机的普及，越来越多的应用需要为这种新型设备进行适配。本文将为刚入行的开发者提供一个清晰的流程，帮助他们理解如何进行 Swift 折叠屏手机适配。
## 流程概述
以下是折叠屏适配的基本步骤：
| 步骤 | 描述 |
|------|------|
| 步骤1 | 了解折叠屏设备的特性 |
| 步骤2 | 准备适配资源 |
| 步骤3 | 修改
# Android适配折叠屏手机
随着技术的发展，折叠屏手机逐渐成为市场的热门产品。这种设备不仅拥有大屏幕的体验，同时又具备良好的便携性。因此，适配折叠屏手机成为Android开发者需要面对的重要课题。本文将探讨如何有效地为折叠屏手机进行Android开发适配，并提供一些简单的代码示例，帮助开发者更好地应对这一趋势。
## 1. 折叠屏手机的特点
折叠屏手机主要有以下几个特点：
- **多
原创
2024-08-13 07:23:11
216阅读
CSS 浮动的内容一、意义：相当于新建的文本框，设置浮动之后就脱离文件流而存在，
成为了异于块元素与行内元素的存在。二、特点：①.不再独占一行
②.无块元素和行内元素之分，行内元素也可以设置宽高生效。
③.浮动块唯独不会盖住文字。开始便是为图片围绕效果而生，现在则被用于页面的横向布局。三、具体内容：1.页面布局：块里面可以递归划分，就可以实现整个页面的划分布局
转载
2024-01-30 19:27:44
39阅读
1.什么是移动端适配 在制作webapp时，一个很关键的问题就是适配各种机型不同屏幕的大小，让每种机型上的布局看起来都尽量一样。 也就是说用同一套代码在不同分辨率的手机上跑时，页面元素间的间距、留白，以及图片大小会随着变化，在比例上跟设计稿一致。2.常见的移动端适配方法 适配方案有很多种，常见的方法有以下几种：固定高度，宽度百分比：这种方法只适合简单、要求不高的webApp，几乎达不到大型项目的要
转载
2024-08-16 08:44:24
45阅读
原标题：华为鸿蒙三年媲美苹果iOS？技术上问题不大，生态才是真正考验前不久，华为创始人任正非在接受美国《财富》杂志采访时被问到：“有多大信心在接下来两到三年内把鸿蒙打造成一个可以与苹果系统相媲美的操作系统”时，任正非回答：“应该不需要两到三年。我作为领导人，说话要保守，不能把下面的人逼得太紧，但对于他们来说，不需要这么长时间。”任正非这番话很快就激起了网友们的热烈讨论，尽管大多数网友都非常支持华为
2018年已经接近尾声，对于手机产品而言，今年是全面屏手机突飞猛进的一年，我们看到了vivo NEX和OPPO Find X精致的机械结构，也看到了荣耀Magic 2和小米MIX 3的出色的滑盖体验以及努比亚X和vivo NEX双屏版的绚丽的正反双屏。2018年，厂商们都在努力地把屏幕做大，把边框做窄，然而却忽视了部分用户所期待的，一款真正的小屏手机。苹果iPhone SE 2不了了之2018年初
转载
2024-01-12 19:26:07
51阅读
# Android 折叠屏手机屏幕适配的实现
随着折叠屏手机的兴起，开发者需要考虑如何适配不同的屏幕大小和形态。在这篇文章中，我将带你了解如何进行折叠屏手机的屏幕适配，帮助你熟练掌握这个技能。
## 整体流程
我们可以将折叠屏适配的过程分为以下几步。下面是一个简要的流程表格，帮助你理解：
| 步骤 | 描述 |
|----
# Android 手机 Pad 折叠屏适配
在手机和Pad等设备上，折叠屏幕的兴起给应用开发带来了新的挑战。如何使应用在不同屏幕尺寸和不同折叠状态下能够正常显示是开发者需要考虑的重要问题。本文将介绍一些适配折叠屏幕的方法，并提供代码示例来帮助开发者更好地适配折叠屏幕。
## 适配方法
### 1. 使用新的资源限定符
针对不同的屏幕尺寸和折叠状态，可以使用新的资源限定符来提供不同的布局和
原创
2024-05-16 06:18:07
146阅读
Android P预览版增加了很多亮点新特性，其中最接地气、最直观的改变当属适配了类似于华为P20的顶部凹槽屏幕设计这一项，俗称刘海屏。 在开发者模式中，Android P系统将调整通知栏的设计来适配此种屏幕，新的APIs也将允许开发者决定通知消息的展示形式。 随着各大手机厂商挤入“刘海屏”手机发布的潮流，Android P版本的此特性，能够让各大应用厂商充分利用独特的屏幕来进行应用设计。 那么如
转载
2023-08-17 23:55:31
129阅读
tip:1.css默认手机样式，平板在此基础上修改数值；2.以500px作为两者区分1.手机cssh3{ height: 4.96rem; padding-top: 1.51rem; font-size: 1rem; font-weight: 500; text-align: center; }
原创
2022-01-29 10:37:35
915阅读
tip:1.css默认手机样式，平板在此基础上修改数值；2.以500px作为两者区分1.手机cssh3{ height: 4.96rem; padding-top: 1.51rem; font-size: 1rem; font-weight: 500; text-align: center; }2.平板css2.1竖屏@media screen and (orientation: portrait) and (min-device-widt.
原创
2021-07-12 11:21:22
1270阅读
三星 Galaxy Fold 和 Surface Duo 以及华为mate X等系列折叠屏手机问世至今已有三年多的时间。此后，三星 Galaxy Z Fold 3 和 Galaxy Z Flip 3、华为mate X2S、荣耀magic V系列等手机均已上市。可折叠设备可供购买，目前正在被消费者使用，随之而来的是我们作为开发人员可以开始探索这种新型设备和响应式设计的下一个发展的机会。这些 Web
转载
2023-08-28 10:02:21
194阅读
