手机端自适应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%;
}
}