AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

css - 移动端h5在iphonex的适配

2018-05-10 1607
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1 @media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { 2 body:after { 3 content: ''; 4 ... 
 1 @media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
 2  body:after {
 3   content: '';
 4   z-index: 9998;
 5   position: fixed;
 6   left: 0;
 7   bottom: -.68rem;
 8   width: 100%;
 9   height: .68rem;
10   background: #fff
11  }
12 }

 

文章标签：
前端开发
移动开发
关键词：
CSS移动端
CSS h5
CSS适配
CSS移动端适配
鋒o丫头
目录
相关文章
爱你三千遍斯塔克
|
3月前
移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box； 定宽度为多少就是多少，代码库,移动端
移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box； 定宽度为多少就是多少，代码库,移动端
爱你三千遍斯塔克
61 0
游客fz577umxdejsg
|
2月前
|
前端开发 UED
触屏新体验：CSS动画让移动端底部导航活起来！
触屏新体验：CSS动画让移动端底部导航活起来！
游客fz577umxdejsg
50 0
一杯龙井解千愁
|
3月前
|
存储 数据采集 移动开发
H5、CSS3面试题，带走不用谢
H5，CSS3面试题
一杯龙井解千愁
43 0
龙大吉
|
4月前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性，并提出了HTML、CSS及其他方面的优化策略。HTML方面，建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法，可提升网页性能，改善用户体验。
龙大吉
67 1
爱你三千遍斯塔克
|
4月前
|
移动开发 JavaScript 前端开发
rem的适配方案，css文件和js文件的引入方式，特色小边框的制作，DS-Digital.ttf数字展示屏的使用方法：，自适应图片 background-size，jQuery爆bug,a和盒子居中,
rem的适配方案，css文件和js文件的引入方式，特色小边框的制作，DS-Digital.ttf数字展示屏的使用方法：，自适应图片 background-size，jQuery爆bug,a和盒子居中,
爱你三千遍斯塔克
120 0
土木林森
|
5月前
|
前端开发 JavaScript UED
【专栏：HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法，包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理，并分享了最佳实践，如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
土木林森
210 7
算精通
|
5月前
|
移动开发 前端开发 JavaScript
：掌握移动端开发：HTML5 与 CSS3 的高效实践
：掌握移动端开发：HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
算精通
79 1
土木林森
|
5月前
|
缓存 前端开发 JavaScript
【专栏：HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性，并提出了优化策略。HTML方面，建议精简结构、使用语义化标签、异步加载脚本和压缩文件；CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
土木林森
90 6
土木林森
|
5月前
|
编解码 移动开发 前端开发
【专栏：HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性，如宽度、高度、初始缩放等，解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width（常用device-width）、initial-scale、maximum-scale、minimum-scale和user-scalable。
土木林森
172 4
土木林森
|
5月前
|
编解码 前端开发 UED
【专栏：HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要，它基于设备特性（如屏幕尺寸、分辨率、方向）应用特定样式，实现响应式设计。通过`@media`规则定义条件，如`(max-width: 600px)`，当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中，需注意保持查询简洁，充分测试，渐进增强，并提前规划。掌握媒体查询能提升移动端用户体验，创造更优秀的网页设计。
土木林森
178 3