IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
/*iPhone6和iPhone8*/
@media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) {/*code*/}
/*iPhone6 Plus 和iPhone8 Plus*/
@media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) {/*code*/}
/*iPhoneX*/
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { /*code*/
}
在使用媒体查询时,发现在iphone中设置margin-bottom,margin-top值是失效。
查找资料发现:参考资料
1.从IOS8开始,UIView的属性var layoutMargins:UIEdgeInsets指定该View的subview同其edge的间距。AutoLayout使用margins来放置内容。其默认值为8pt。
2.如果一个View是ViewController的rootview,系统会自动设置和管理margins,top和bottom。margins为0pt。所以自己设定的margin-bottom,margin-top会失效。
针对IOS端margin-bottom,margin-top失效问题目前有两种解决方案:
1.用设定了高度的div撑开底部,达到与margin撑开的相同的效果。2.使用padding-bottom撑开底部,大多数情况下可以满足安卓端和IOS端的展示需求。
IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX相关推荐
- CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
/*iPhone6和iPhone8*/ @media only screen and (device-width : 375px) and (device-height : 667px) and (- ...
- CSS媒体查询判断iphone设备
判断iphone设备 兼容iphone4/4s @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){ } 兼容iph ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- CSS媒体查询:最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height When writing a CSS media query, is there any way yo ...
最新文章
- 突发!贝壳董事长左晖因疾病意外去世
- LAMP网站架构方案分析
- java中单例设计模式
- 数学问题——最大公约数与最小公倍数
- sql server 2008学习4 设计索引的建议
- (转)Splay伸展树模板
- mac 硬盘未推出 硬盘无法读取_在Mac上(正确的)格式化U盘
- 2019hdu多校1
- C#中数据库备份还原
- 基于 VEthernet 轻松实现 tun2socks 示例程序
- 飞秋与虚拟机的有关IP设置
- 【高级持续性威胁追踪】SolarWinds供应链攻击持续跟踪进展
- 阿里云云盾证书是什么?云盾证书有什么作用?
- 计算机计算的应用,计算器计算
- 抖音好物分享怎么做?
- 计算机期刊杂志投稿指南
- Self-Supervised Deep Blind Video Super-Resolution
- Uniapp 制作海报功能
- 计算机除尘 注意事项,电脑除尘要注意
- 翻译: 深入深度学习 2.3. 线性代数 pytorch