Skip to main content

css 低端机型适配

居中​

子元素使用position:absolute，并集成父级 flex 居中效果时，会靠左显示

方案 1：使用 transform 适配

left: 50%;
transform: translateX(-50%); # 或 margin-left: -宽度值*0.5

方案 2：使用 margin

.element {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; /* 有了这个就自动居中了 */
}

元素挤压​

button 元素文字挤压，或者列表中的子元素挤压

解决：flex-shrink

flex-shrink: 0; # 禁止自动挤压元素尺寸

父级fixed后，内容无法滚动​

给父级加上：

/** 横向滚动 **/
left: 0;
right: 0;
overflow-x: scroll;
overflow-y: hidden;

/** 竖直方向滚动 **/
top: 0;
bottom: 0;
position: fixed;
overflow-y: scroll;
overflow-x: hidden;