Question

我正致力于为按钮制作风格化的响应式课程。按钮中的文本应与页面上其他文本的大小相同，并且在桌面上调整大小时工作正常，但在平板电脑/手机上查看页面时，按钮中的文本大小很多小于普通文本（几乎就像em单位改变了大小一样）。这种情况发生在所有经过测试的移动浏览器中 - safari，chrome和默认的android浏览器 - 无论该类被应用于哪个HTML元素（button，div，p）。
我有一个侧面菜单的另一个程式化类，它正在经历相同的文本缩小效果（不同的类应用于ul）。有趣的是，菜单的缩小文本与缩小的按钮文本的大小相同，因此无论文本大小如何发生变化都会发生在另一个文本中。

关于如何/为何如此的任何想法？它可能与移动浏览器的“自动缩放”有关吗？我是新鲜的想法，并希望听到有关此事的任何想法

.blueButton, .greenButton{
    display: inline-block;
    padding: .5em .5em .5em .5em;
    text-align: center;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px #636363;
    border-radius: .3em;
    box-shadow: .25em .25em .4em 0px #636363;
}

.blueButton a:link, .greenButton a:link, .blueButton a:visited, .greenButton a:visited{ 
    text-decoration: none;
    color: white;
}

.blueButton:hover, .greenButton:hover{box-shadow: .25em .25em .4em 0px black;}
.blueButton:hover{ background: #0b3a74;}
.greenButton:hover{ background: #9ec83d;}

.blueButton{ /*gradients for different browsers- 1)Safari 2)Opera 3)Firefox 4)Standard*/
    background: -webkit-linear-gradient(left top, #3c78cc , #0b3a74);
    background: -o-linear-gradient(bottom right, #3c78cc , #0b3a74);
    background: -moz-linear-gradient(bottom right, #3c78cc , #0b3a74);
    background: linear-gradient(to bottom right, #3c78cc , #0b3a74); 
}

.greenButton{
    background: -webkit-linear-gradient(left top, #caf170, #9ec83d);
    background: -o-linear-gradient(bottom right, #caf170, #9ec83d);
    background: -moz-linear-gradient(bottom right, #caf170, #9ec83d);
    background: linear-gradient(to bottom right, #caf170, #9ec83d);
}

媒体查询：

@media all and (min-device-width: 1101px)
@media all and (min-device-width: 768px) and (max-device-width: 1100px), (min-device-width: 1101px) and (min-width: 700px) and (max-width: 900px)
@media all and (min-device-width: 240px) and (max-device-width: 767px), (min-device-width: 768px) and (min-width: 240px) and (max-width: 699px)
@media all and (max-device-width: 239px), (min-device-width: 768px) and (max-width: 239px)

Answer 1

在<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">部分添加<head>。

移动浏览器中的程式化内容缩小了

1 个答案: