css知识

手机端自适应meta标签

属性分析:
initial-scale->初始缩放比列
minimum-scale->最小缩放比例
maximum-scale->最大缩放比例
user-scalable->用户是否能缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

文字超出显示省略号

div{
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

隐藏滚动条

::-webkit-scrollbar {
display:none;
}

根据移动端设备宽度写相应的样式

设备宽度小的要放在下面,防止样式覆盖

@media screen (min-width:320px and max-width: 414px){
    .img {
         width: 100%;
         height: 200px;
     }
 }
@media screen and (max-width: 414px){
    .img {
        width: 100%;
    }
}
@media screen and (max-width: 320px){
    .img {
        width: 100%;
    }
}