IPhoneX网页布局
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启
Xcode 9
的iPhone X 模拟器作为学习和调试。
设计和尺寸相关
IPone型号 | 屏幕尺寸 | 屏幕密度 | 开发尺寸 | 像素密度 | 倍图 |
---|---|---|---|---|---|
4系列 | 3.5英寸 | 326ppi | 320*480pt | 640*960px | @2X |
5系列 | 4英寸 | 326ppi | 320*568pt | 640*1136px | @2X |
6/6s/7/8 | 4.7英寸 | 326ppi | 375*667pt | 750*1334px | @2X |
6p/6sp/7p/8p | 5.5英寸 | 401ppi | 414*736pt | 1242*2208px | @3X |
X | 5.8英寸 | 458ppi | 375*812pt | 1125*2436px | @3X |
在设计的角度上,根据开发尺寸我们用IPoneX和比较经典的4.7英寸屏幕进行对比。竖屏模式下不难发现X比其多了145pt,那么我们应该怎么分配这145的距离呢。
- 顶部
Navigation
Bar增加44(for“刘海”)
- 底部
Bottom
Bar增加34(for“黑条Home按钮”)
- 中间的
Safe Area
区域(for“内容区域”)
安全区域
何为安全区域,简单来讲就是我们在此区域内设置一些交互的按钮或者链接不会被影响。下图的话底部按钮就会受到一些影响,图片随意截取,请勿在意:
viewport-fit
可喜可贺,IOS11给我们提供了一个新特性
viewport-fit
值 | 说明 |
---|---|
auto/contain | 页面默认内嵌 |
cover | 页面充满屏幕 |
<meta name="viewport" content=" viewport-fit=cover">
viewport-fit默认情况下是
auto
我们可以看一下同一个页面不设置
viewport-fit
和设置其为
cover
的两种表现形式:
不设置:
设置为
cover
:
当然,在横屏情况下我们可以更清晰地看到,设置cover可以使我们的页面导航和tag更加符合设计,但是内部的我们应该怎样进行布局呢?是直接使用
padding
还是有别的方法呢?
CSS constant()函数
我们可以通过计算其padding值来进行布局,解决文字被埋在传感器底部的问题。
但是IOS11给我们提供了更简单的办法。
WebKit
中新增了一个 CSS 函数
constant()
,以及一组 四个已经定义好的常量:
safe-area-inset-left
,
safe-area-inset-right
,
safe-area-inset-top
,
safe-area-inset-bottom
。这四个常量分别代表了每个方向的非安全区域的值:
那我们试着现在给刚刚的被传感器覆盖的页面增加一些css:
.con {padding: 12px;padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);
}
是的。完美的效果。
瑕疵问题
但是如果现在我们现在把手机换成竖屏的话,会出现一些小瑕疵,因为我们设置的是
padding-left
和
padding-right
为安全区域外的变局的常量,所以当我们竖过来后,竖屏模式的
safe-area-inset-left
和
safe-area-inset-right
为0,那么文字还是会贴边的。
新的CSS函数
min()
和
max()
可以帮我们在不通过JS的情况下简单解决这个问题。(PS:现Safari暂未支持)
@supports(padding: max(0px)) {.con {padding-left: max(12px, constant(safe-area-inset-left));padding-right: max(12px, constant(safe-area-inset-right));}
}
这样的话
padding-left
会取较大的那个值。当
safe-area-inset-left
为0时候,其值会为
12px
。
本文讲的一些方法对于现阶段的IPhone网页布局其实还是有一些兼容问题
constant()
需要我们对不支持的浏览器做一些兼容回退,并且CSS工作组对这个方法使用了不同的名称
max()
和
min()
方法现阶段还没有支持,我们还是要采用判断横竖屏的方法进行动态的设置,或者直接也抛弃
constant()
做固定的padding值。
- 在使用定位的时候如果和理想效果有偏差可以试试设置
body,html
的高度为
100%
全屏时代即将来临,未来我们应该有更多的方法进行网页布局。
本文部分图片和思想来自designing-websites-for-iphone-x
IPhoneX网页布局相关推荐
- IPhoneX网页布局简介
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试. ...
- IPhoneX网页布局 全屏布局(转)
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试. ...
- DivCSS网页布局中CSS无效的十个常见原因
在学习DivCSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持 ...
- 黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
- 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源 下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- 【疯狂积累CSS】2:利用@media screen实现网页布局的自适应
如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) {body {background-col ...
- flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
- 网页布局设计的标准尺寸
许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了 网页设计标准尺寸 ...
最新文章
- T-SQL查询高级—SQL Server索引中的碎片和填充因子
- C# 发送消息SendKeys、SendMessage、keybd_event的用法
- java 初始化log4j_java – log4j:WARN请正确初始化log4j系统
- OpenCV, 名校机器学习相关课程
- android开发方法数,Android减少App方法数
- 图书管理系统C语言程序设计课程,vs c语言图书管理平台课程设计_图书管理平台c语言程序设计_c语言课程设计 图书管理系统...
- 2.3、getRunListeners().starting()
- OSGi运行环境下java反序列化问题的解决方式
- 带你快速读懂ITIL4
- lbp2900打印机linux驱动下载,佳能LBP2900+驱动下载-佳能LBP2900+打印机驱动下载 V3.30官方版--pc6下载站...
- dw怎么在框架中加入网页_DW中制作框架网页.ppt
- 【上海房价预测】代码实现——利用BP神经网络进行上海二手房价预测
- 使用hutool工具类,计算日期差
- MybatisPlus代码生成器报错AutoGenerator()‘ has private access in ‘com.baomidou.
- 【Xcode】当iphone升级成15.0.1版本以后,显示Unsupported OS version
- 工业质检-缺陷检测数据集
- “火星一号”项目计划于2026年实现载人登陆火星
- 我的大学六年-郭天祥
- 安装Chrome Restlet Client插件
- POE——POE供电详解
热门文章
- 定义一个数组,调转数组中的数据
- 在python中可以使用_123_在Python中使用正则表达式的方法
- Vibosoft PDF Image Extractor v2.1.5中文版
- Windows 下 Red Pitaya SD card image制作过程
- 关于tio的实战演练
- 项目的登录注册如何用邮箱发送验证码
- 聚焦Open Infrastructure丹佛峰会,九州云分享边缘计算新技术
- chatgpt赋能python:**Python取余符号:了解%运算符的作用和用法**
- 金蝶云星空和金蝶云星空单据接口对接
- 华为路由器怎么查看设备本身的MAC地址