首页 /编程语言和算法/其它语言
 CSS中 @media 移动端按钮宽度自适应
今天 11:34

可以在Chorme浏览器普通页面和F12设置宽度381观看:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- 关键:添加移动端视口设置,让页面适配手机屏幕 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .custom-btn {
        padding: 100px 250px;
        font-size: 14px;
        height: auto;
        color: blue;
        /* 增加按钮基础样式,避免默认样式干扰 */
        border: none;
        cursor: pointer;
    }

    /* 调整断点为更合理的768px(平板/手机通用断点) */
    /* 你也可以根据需要改为375px(主流手机宽度) */
    @media (max-width: 768px) {
        .custom-btn {
            padding: 10px 25px;
            font-size: 14px;
            height: auto;
            color: red;
            /* 移动端按钮宽度自适应 */
            width: 100%;
            box-sizing: border-box;
        }
    }
</style>
</head>
<body>
<input type="button" class="custom-btn" value="我是按钮">
</body>
</html>


 
全部回复(0)
首页 | 电脑版 |