时间戳

首页 > 解决方案 > 不同手机的css问题

css - 不同手机的css问题

问题描述

我正在使用这个 css 在移动屏幕下方显示一些固定部分。但是在 Samson grand prime 中它的工作很好，但在三星 j7 max 中它的宽度有点小。让我给你代码和图片

      .footer {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    color: #b1b1b1;
    height:65px;
    text-align: center;
    padding:0px;
    -webkit-box-shadow: 0px -3px 3px 0px rgba(133,133,133,1);

    z-index:10000;
} 
.kafyfooter{
 display:block !important;   
 z-index:10000;
}

.footermenu {
    width:7%;
    background:#fff;
    height:100%;
    padding:22px;
    display:inline;
    float:left;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);
    box-shadow: inset 0px 0px 1px 1px rgba(204,204,204,1);

}

: 三星盛大主图 : https://gyazo.com/9eaf2240c5d0f91a4d57c3a787598e4f

：三星J7 Max图片： https ://gyazo.com/2c48dc559c3a5e9948fc0c6b11a8ae71

标签： cssresponsive

解决方案

width: 7%;似乎太少（并且菜单项被拉伸以适应其内容，这可能取决于屏幕分辨率）。

正确设置宽度或为页脚使用网格。（编辑：我的意思是，display: grid;在你的页脚上使用）

此外，为了使其在不同设备上看起来更加“相同”，请考虑使用 vh、vw、rem 等单位（https://www.w3schools.com/cssref/css_units.asp），因为 px 可以代表一切根据屏幕，从非常小到清晰可见的块。

推荐阅读