0
点赞
收藏
分享

微信扫一扫

《前端与SEO》—— 第三章:robots.txt

一ke大白菜 2023-06-20 阅读 30

遇到个奇怪的问题,在微信小程序页面中添加一个底部固定按钮,设置样式为fixed,结果在iphone11上会失效,即按钮会跟着页面布局移动,修改过程在此记录一下,遇到相同问题的朋友可以看下是否你也是相同问题。

手机版本:iphone 11 

重现代码:

index.wxml文件内容:

<view class="content">

</view>
<view class="btn">测试按钮</view>

index.wxss文件内容

.content{
   width:100%;
   height:3000rpx
   background: #f7f7f7;
}

.btn{
    width: 560rpx;
    height: 80rpx;
    background: #3080DB;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    position: fixed;
    bottom: 68rpx;
    z-index: 2;
    margin: 0 auto;
}

问题解决方案:

在index.wxss中增加如下代码,最终代码如下

/** 这是增加的代码 **/
page{
    width: 100vw;
    height: 100vh;
    position: relative;
}


.content{
   width:100%;
   height:3000rpx
   background: #f7f7f7;
}

.btn{
    width: 560rpx;
    height: 80rpx;
    background: #3080DB;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 28rpx;
    color: #FFFFFF;
    text-align: center;
    position: fixed;
    bottom: 68rpx;
    z-index: 2;
    margin: 0 auto;
}

iphone手机有时候比较怪异,开发工具也没有个iphone11的模拟器,所以出现问题只能各种试,在此记录一下

如果本文对您有帮助还请动手点个赞,以帮助更多人作为参考。

下面对css fixed进行以下知识扩展:

css中固定定位fixed是什么?

说明

1、固定定位是元素固定在浏览器可视区的位置。固定定位也可以算是一种特殊的绝对定位。

2、使用场景为当浏览器页面滚动时,元素的位置不会改变。

固定定位的特点

  • 以浏览器的可视窗口为参考点的移动元素。

  • 和父元素无关。

  • 不要随滚动条滚动。

  • 固定定位不占用原位置。固定定位也是脱标的。

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

.w {

width: 800px;

height: 1400px;

margin: 0 auto;

background-color: pink;

}

.fixed {

position: fixed;

/*1,走浏览器宽度的一半*/

left: 50%;

/*2,走版心盒子的一半,想宽一点可以加多一点px*/

margin-left: 400px;

width: 50px;

height: 150px;

background-color: skyblue;

}

</style>

</head>

<body>

<div>

</div>

<div>

版心盒子

</div>

</body>

</html>

 以上就是css中固定定位fixed的介绍,希望对大家有所帮助。

举报

相关推荐

第三章总结

第三章 Linux

第三章:文件

第三章 循环

第三章 作业

第三章、数组

0 条评论