比木白-css

发表于 | 分类于

CSS

文字两端对齐

1
2
3
.demo {
    text-align: justify;
}

字间距

1
2
3
.demo {
    letter-spacing: 1px;
}

移动端适配rem

原因

最近在写CBA m站官网适配,使用了cssnano和postcss-px2rem两个外部依赖包,将px直接转化为rem,这时候会发现字体大小(font-size)不能直接转为rem,因为随着手机屏幕的变化,字体有时候会很大,有时候会很小,是不一致的,边距、布局、边框甚至圆角都可以直接转为rem,但是字体大小等一些固定统一的部分,就不需要转rem了。

使用

1
2
3
4
5
6
7
8
9
10
/**
    ...
*/
.demo {
    margin-top: 20px;
    font-size: 14px; /*no*/
}
/*
    类似于使用/*no\*\/这样将不需要转化为rem的部分添加上后缀,第三方依赖包就不会将px转化为rem了
*/

IOS h5 overflow:hidden失效

原因

最近在写CBA m站官网适配,期间有一个问题,就是设置了body的overflow-x:hidden,没办法将溢出的部分隐藏;业务是这样的,我这边使用了swiper轮播图的组件,导致在手机端的viewport溢出屏幕好多,而且还可以滑动,所以我就直接在body上面添加了width:100%;overflow-x:hidden;的样式,以为这样就可以将溢出屏幕的部分隐藏。

后来才发现,苹果手机上面还是会出现这个问题,当时我就诧异了,经过一番的查找之后,发现原来苹果手机的浏览器的机制就认为所有的viewport就应该展示出来,body是继承自viewport的样式配置的,而想要改变viewport,就必须先改变html的样式配置。

原因是viewport是作用于html的样式配置的,所以首先要配置html width:100%;overflow-x:hidden;的样式,使body不再继承自viewport的样式配置,之后再在body上面添加width:100%;overflow-x:hidden;的样式。

详情

1
2
3
4
5
6
7
8
9
html {
    width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    overflow-x: hidden;
}