css知识

最新推荐文章于 2026-01-30 08:00:00 发布

原创最新推荐文章于 2026-01-30 08:00:00 发布 · 117 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

当前文章被收录于：

css

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何使用meta标签实现手机端网页的自适应布局，包括initial-scale、minimum-scale、maximum-scale和user-scalable属性的设置。同时，讲解了通过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%;
    }
}