JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-6-1 06:52:44

目前有四种方法

1.让设计单独设计一版iphonex的尺寸的图，用js代码判断设备，如果检测到是iphonex就换图

//如果设备是iphonex则追加元素填补空余
           function isIPhoneX(fn){
           var u = navigator.userAgent;
           var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
           if (isIOS) {
           if (screen.height == 812 && screen.width == 375){
           //是iphoneX
//进行更换适配图片操作
           }else{
           //不是iphoneX
           return;
           }
           }
           }

//检测设备是否是iphoneX
      isIPhoneX();

2.尽量让设计设计图的时候设计成图片下面是纯色的颜色，通过background:url(路径) #000 no-repeat left top;的方式让与图片相同的背景色去填充空白

3.通过以下代码拉伸图片进行竖向铺满，但是缺点是图片被拉长很难看

body{
               margin: 0;
               padding: 0;
               background: url(img/bg.jpg) no-repeat left top;
               background-size: cover;
   background-attachment: fixed;
           }

4.通过以下代码让放在元素中的img铺满整个屏幕

html：

<body>

</body>

css:

#imgWrap{
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%
}
#imgWrap img{
width:100%;
height:100%;
}
---------------------
作者：wly_syp
来源：CSDN
原文：https://blog.csdn.net/wly_syp/article/details/84553322
版权声明：本文为博主原创文章，转载请附上博文链接！ z转载

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

解决iphonex屏幕过长背景图片或者放在元素里面的图片不能铺满的问题