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“内容区域”)
安全区域
][2]][1]
何为安全区域,简单来讲就是我们在此区域内设置一些交互的按钮或者链接不会被影响。下图的话底部按钮就会受到一些影响,图片随意截取,请勿在意:
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 模拟器作为学习和调试. ...
- 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
电驴资源 下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...
- css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局 语音 编辑 锁定 讨论 上传视频 上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
- 计算机网页div怎么划分,《网页布局与实现(DIV+CSS)》
编辑推荐:<高职高专计算机教学改革新体系规划教材>特色: ·反映产业技术升级,符合职业教育规律和高端技能型人才成长规律,根据计算机类专业建设和教育教学改革而设计. ·对接职业标准和岗位要求 ...
- ( )不是html的布局标签,不要使用的HTML标签(WEB标准网页布局)
网页制作网络技术需要大家共同分享,不能闭门造车,下面是bj-dns文章简介:CSS网页布局中不推荐使用的HTML标签,请尽量不要使用这些HTML标签. CSS网页布局中不推荐使用的HTML标签,请尽量 ...
- HTML之网页布局与设计技巧
网页布局 网页布局是指网页整体的布局,虽然网页的内容是很重要额,但是如果网页的布局很乱,用户看起来也会感觉很不舒服.当用户打开一个网页时,第一印象就是网页漂不漂亮,然后才会去看网页内容. 网页大小 设 ...
- 《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞 图书编号: 9787302261834 图书格式: PDF 出 版 社: 清华大学出版社 出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
- 动画:Flex布局 | 别再用传统方式进行网页布局了(上)
写在前边 网页布局,是前端入门的时候必学.必须熟练的一门技术,学到什么程度算是入门了呢?随便给你一个网站,你就可能快速的分析出网页的结构,然后搭建出模型,这是前端网页布局入门的最基本要求. 作为一个前 ...
最新文章
- 启动子级时出错_减速机安装与使用时需注意的八个要点,细节很重要!
- Gson:我爸是 Google
- java validation_java bean validation 参数验证
- Dell 2950服务器CPU-E1422错误解决方法
- TypeError: Object of type 'float32' is not JSON serializable
- python安装包_Python开发环境搭建
- ubuntu10.04 解决打开windows记事本.txt文件乱码的方法
- Advanced Driver Assistance Systems (ADAS)
- shell脚本注意点
- 【剑指offer】面试题35:复杂链表的复制(Java 实现)
- Android 图片压缩器
- 安装Samba服务器
- yii mysql 查询 类型转换_Yii2.0 API改造(返回数据库对应字段数据类型)
- Web应用部署在WebLogic中Basic认证无法运行问题及解决
- Docker服务以及容器如何设置自动启动
- #读源码+论文# 三维点云分割Deep Learning Based Semantic Labelling of 3D Point Cloud in Visual SLAM
- 基于WizFi220的Cosmo WiFi扩展板
- 一个文献代理和医学资料非常丰富的地方
- vim菜单栏不正常显示以及隐藏菜单栏
- SQL Server AlwaysON从入门到进阶(6)——分析和部署AlwaysOn Availability Group
热门文章
- boost::geometry::strategy::transform::matrix_transformer用法的测试程序
- boost::geometry模块自定义坐标系示例
- boost::format模块测试格式与枚举一起使用
- GDCM:gdcm::Base64的测试程序
- DCMTK:将显示曲线导出到文本文件
- VTK:可视化之CubeAxesActor2D
- VTK:图表之CreateTree
- VTK:开发Warnings实例
- OpenCV阈值范围Threshold inRange的实例(附完整代码)
- OpenCV神经网络neural network的实例(附完整代码)